在一條線上對齊圖像css

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> 

和圖像

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

他們佔據我想的空間，而是在CSS被安排像下面

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;'。然後加入COL-MD-4圖像容器，和CSS圖片：

.timeline-gallery img { 

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

} 

但我不知道你想要什麼......

Answer 2

在這裏，你去與解決方案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>

我想這是你在找什麼。