將圖像對齊在一起

在下面的代碼中，我插入了5個圖像，但我不能將它們全部放在一行中並消除它們之間的間距。將圖像對齊在一起

<section class="images"> 
     <div class="row"> 
     <div class="col-lg-3"> 
      <img class="img-responsive" src="images1.jpg" alt="images1" max-width="400px" max-height="95px" width="auto" height="auto"> 
     </div> 
     <div class="col-lg-3"> 
      <img class="img-responsive" src="images2.jpg" alt="images2" max-width="230px" max-height="95px" width="auto" height="auto"> 
     </div> 
     <div class="col-lg-3"> 
      <img class="img-responsive" src="images3.jpg" alt="images3" max-width="230px" max-height="95px" width="auto" height="auto"> 
     </div> 
     <div class="col-lg-3"> 
      <img class="img-responsive" src="images4.jpg" alt="images4" max-width="230px" max-height="95px" width="auto" height="auto"> 
     </div> 
      <div class="col-lg-3"> 
      <img class="img-responsive" src="images5.jpg" alt="images1"> 
     </div> 
     </div> 
    </section>

如何將5張圖片放在一起並消除圖片之間的空白？

來源

2016-05-16 Sidney Sousa

Bootstrap列div帶有填充。消除它們：

.row div {padding:0;}

來源

2016-05-16 15:21:46

讓我們把行分成一個寬圖像和四個窄圖像。

1 x 400px + 4 x 230px = 1320px 
400px/1320px = 10/33 
230px/1320px = 23/132

糟糕，這樣的零件不適合基於12列的佈局。因爲每一列具有

1320px/12 = 110px

我建議一個小變化圖像的寬度：

440px = 4 x 110px 
220px = 2 x 110px

圖像440個像素寬將採取4 12的列。 220像素寬的圖像將佔用12列中的2列。

刪除列之間的間隙：

.images { 
    padding: 0 15px; 
} 
.images .col-lg-2, 
.images .col-lg-4 { 
    padding: 0; 
}

引導確定img-responsive像這樣：

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

因此，我們寫

width="100%"

代替

max-width="...px" max-height="95px" width="auto" height="auto"

檢查結果：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.images { 
 
    padding: 0 15px; 
 
} 
 
.images .col-lg-2, 
 
.images .col-lg-4 { 
 
    padding: 0; 
 
}

<section class="images"> 
 
    <div class="row"> 
 
    <div class="col-lg-4"> 
 
     <img class="img-responsive" src="http://placehold.it/440x95" alt="images1" width="100%"> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
     <img class="img-responsive" src="http://placehold.it/220x95/ddd" alt="images2" width="100%"> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
     <img class="img-responsive" src="http://placehold.it/220x95" alt="images3" width="100%"> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
     <img class="img-responsive" src="http://placehold.it/220x95/ddd" alt="images4" width="100%"> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
     <img class="img-responsive" src="http://placehold.it/220x95" alt="images5" width="100%"> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-05-16 15:51:58

您也可以簡化的東西！將所有內容放在col-lg-12中，然後將圖像添加爲內聯列表的元素。如果你不需要每個圖像的列，內聯列表應該工作得很好。然後，您只需調整li img元素的邊距/填充以確定它們之間需要多少空間。

更簡單，不是嗎？

來源

2016-05-17 19:40:39 BrainHappy

我試過，但顯示：inline-block的沒有任何區別，因此圖像保持一個行而不是在一個塊中對齊。 –

閱讀：https：// martinwolf。組織/博客/ 2013/04 /中心流體寬度導航與浮動鏈路賜到合適內容 – BrainHappy

理想情況下，全寬爲100％。因此，如果您需要5幅圖像，只需將100除以5即可得到20％。檢查HTML代碼：

<footer class="images"> 
      <div class="row"> 

        <div class="col-lg-2"> 
         <img class="img-responsive" id="responsive" src="Dollarphotoclub_79081264-copy.jpg" alt="images1"> 
        </div> 
        <div class="col-lg-2"> 
         <img class="img-responsive" id="responsive" src="beds.jpg" alt="images1"> 
        </div> 
        <div class="col-lg-2"> 
         <img class="img-responsive" id="responsive" src="bed-cream.jpg" alt="images1"> 
        </div> 
        <div class="col-lg-2"> 
         <img class="img-responsive" id="responsive" src="soaps.jpg" alt="images1"> 
        </div> 
        <div class="col-lg-2"> 
         <img class="img-responsive" id="responsive" src="Dollarphotoclub_79081264-copy.jpg" alt="cake2"> 
        </div> 
       </div> 
     </footer>

CSS代碼將是因爲它遵循：

.masterfooter .col-lg-2 { 
width: 20%; 
float: left; 
}

來源

2016-05-19 15:00:05

將圖像對齊在一起

回答

相關問題