如何將css和html連續放置三個div

Question

我想在一個html頁面上使用div和css連續放置3個圖像和3個圖像。我可以連續放置3張圖片，但無法將其他圖片顯示在下面的一行中，我做錯了什麼？

這裏是我的html

<div id="ballons"> 

     <img src="ballons.png" alt="ballons"/> 
     <br> 
     <center><a href="">Ballons</a></center> 


    </div> 

    <div id="cake"> 

     <img src="cake.png" alt="cake"/> 

     <br> 
     <center><a href="">Cake</a></center> 

     </div> 

     <div id ="candles"> 

     <img src="candles.png" alt="candles"/> 

      <br> 
     <cnter><a href="">Candles</a></center> 

     </div> 


     <div id ="bag"> 

     <img src="bag.png" alt="party bag"/> 

<br> 
      <center><a href="">Party Bag</a></center> 

     </div> 

<div id ="boncey"> 
     <img src="boncey.png" alt="boncey castle"/> 

<br> 
      <center><a href="">Boncey Castle</a></center> 

     </div> 

<div id="paper"> 
      <img src="paper.png" alt="paper plate"/> 


<br> 
      <center><a href="">Papaer Plates and Cup</a></center> 


     </div> 

這裏是我的CSS

#ballons 
{ 

    padding-top: 60px; 
    width: 200px; 
    float: left; 
    padding-left: 150px; 
    float: left; 
    } 

#cake 
{ 
    padding-top: 60px; 
    float: left; 
    width: 250px; 


} 

#candles 

{ 
    padding-top: 60px; 
    width: 200px; 
    float: left; 

} 

#bag 
{ 
    padding-top: 80px; 
    width: 200px; 
    padding-left: 150px; 
    position: relative; 
} 

#boncey 
{ 
    padding-top: 60px; 

    width: 250px; 
    position: relative; 
    } 

#paper 
{ 
    padding-top: 600px; 
    width: 200px; 
    float: left; 
} 

Answer 1

嘗試這樣的事情。您必須調整寬度，高度等，以便您能夠做到這一點，但是這會讓您瞭解如何在行中放置這些項目，並在此情況下將照片放在標題上。它也很容易適應響應。

jsfiddle

<div class="row"> 
    <div class="rowitem"> 
     <img src="ballons.png" alt="ballons"/> 
     <span><a href="">Ballons</a></span>   
    </div> 
    <div class="rowitem"> 
     <img src="cake.png" alt="ballons"/> 
     <span><a href="">Cake</a></span>   
    </div> 
    <div class="rowitem"> 
     <img src="candles.png" alt="ballons"/> 
     <span><a href="">candles</a></span>   
    </div> 

</div> 

<div class="clearfix"></div> 

<div class="row"> 
    <div class="rowitem"> 
     <img src="bag.png" alt="ballons"/> 
     <span><a href="">Bag</a></span>   
    </div> 
    <div class="rowitem"> 
     <img src="boncy.png" alt="ballons"/> 
     <span><a href="">boncy</a></span>   
    </div> 
    <div class="rowitem"> 
     <img src="streamer.png" alt="ballons"/> 
     <span><a href="">streamer</a></span>   
    </div> 

</div> 

CSS：

.rowitem { 
    display:inline-block; 

} 

.rowitem img { 
    display:block; 

} 
.clearfix { 
    clear:both; 
    height: 20px; 
} 

Answer 2

如果你想保持你的結構

，您可以添加浮動：左底部3個的div，然後添加一個div:nth-child(4n) {clear:left;}風格。但是我會將所有的div包裝在一個固定寬度的容器div中，這樣當你最小化窗口時它們不會被包裝，除非你想讓它們包裝。

Answer 3

試圖使用特定ID選擇器製作自定義網格解決方案並不是一個好主意。製作網格的最好方法是使用可與類一起使用的可擴展解決方案。有很多這樣的解決方案，包括Bootstrap（在評論中提到過）。

我個人喜歡Dan Eden的Toast。這是非常可擴展和易於使用。

1. 要使用它，請轉到repo並下載壓縮文件。
2. 打開文件。轉到Toast-master> css> grid.css
3. 將grid.css放入您的項目中。
4. 鏈接它像這樣：

5. 而且使用這樣的（它的針對性和靈活性）：

   <div class="container"> 
       <div class="grid"> 
        <div class="grid__col grid__col--1-of-3"> 
   
        </div> 
        <div class="grid__col grid__col--1-of-3"> 
   
        </div> 
        <div class="grid__col grid__col--1-of-3"> 
   
        </div> 
       </div> 
   </div>