イメージを1行に整列する

Question

私はサイトをデザインするためにブートストラップを使用しています。イメージを水平に整列させ、オーバーフローを隠そうとしています。

ここでdivの

<div class="timeline-gallery col-md-12" style="display: inline-block;"> 
    <img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail"> 
    <img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail"> 
    <img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail"> 
</div> 

や画像のCSS

.timeline-gallery img { 
    display: inline-block; 
    position: relative; 
    float: left; 
    margin-right: 5px; 
    overflow: hidden; 
} 

彼らは私が好きではなく、それが難しい

Answer 1

以下のように配置されているスペースを占有ですあなたが何を望んでいるかを理解してください...

<div class="timeline-gallery col-md-12"> 
    <div class='col-md-4'> 
    <img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail"> 
    </div> 
    <div class='col-md-4'> 
    <img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail"> 
    </div> 
<div class='col-md-4'> 
    <img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail"> 
    </div> 
</div> 

ブートストラップカラムcol-md-12からstyle='display:inline-block;'を削除します。そして、イメージコンテナ、および画像のためのCSSとしてCOL-MD-4を追加します。ここでは...

Answer 2

を

.timeline-gallery img { 

    max-width:100%; 
    height:auto; 
    margin:0 auto; 

} 

しかし、私は何がしたいかわからないあなたは、ソリューションhttps://jsfiddle.net/forj72t6/1/

で行きます

.timeline-gallery img { 
 
    display:block; 
 
    position: relative; 
 
    margin-right: 5px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="coantiner-fluid"> 
 
    <div class="row"> 
 
    <div class="timeline-gallery col-md-12"> 
 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail"> 
 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail"> 
 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail"> 
 
    </div> 
 
    </div> 
 
</div>

は、私は、これはあなたが探しているものであると思います。