複数のアイテム/画像を部門内に配置する方法

Question

これらの3つのイメージをコンテナ内に配置する際に問題があります。私はブートストラップを使用していますが、後で追加されるいくつかのオーバーレイコンテンツのために、グリッドシステムのいくつかを避け、これらの3つのイメージを独立させたいと思います。 .about__innerクラスのhttp://codepen.io/anon/pen/yVovqW

.container { 
    background-color: lightgreen; 
} 

.images { 
    padding: 10px; 
} 

.about__images { 
    max-width: 900px; 
    margin: 0 auto; 
    text-align: center; 
    //margin-top: 60px; 
} 

.about__inner img { 
    max-width: 100%; 
    //margin-right: 20px; 
} 

.about__inner { 
    margin-right: 20px; 
    position: relative; 
    width: 250px; 
    float: left; 
} 

<div class="container images"> 
    <div class="about__images"> 
    <div class="about__inner"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt=""> 

    </div> 
    <div class="about__inner"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt=""> 

    </div> 
    <div class="about__inner"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt=""> 

    </div> 
    </div> 
</div> 

Answer 1

変更display:inline-block;ためfloat left;を、あなたが行ってもいいようになります。ここでは、現在の状態を示すために、ペンです。

Answer 2

私はdisplay:flex;を提案するが、コードを少し遊んだ後、私はあなただけのコードのこの部分を変更した場合、あなたはそれを修正することができていることが分かったつもりだった：私はIE8 +を目指したDEMO

.about__inner { 
    margin-right: 20px; 
    position: relative; 
    width: 250px; 
    display:inline-block; //float: left; 
}