如何定位多個div以排隊

我有6個相同的divs，我想要排隊，以便有3排2.我該怎麼做？如果我讓他們漂浮：離開他們弄亂佈局如何定位多個div以排隊

HTML：

<div id="block"> 
    <h3>Name</h3> 
     <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
</div> 

<div id="block"> 
    <h3>Name</h3> 
     <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
</div>

CSS：

#block { 
background: url(Images/Testimonials/bg.gif); 
width: 500px; 
padding: 0px 6px 0 6px; 
}

來源

2017-02-25 L. Dexter

把你到目前爲止的相關代碼在您的文章，使我們有一個[MCVE]一起工作。 –

您可以使用float: left，但給的div 50％的寬度。
最好把box-sizing: border-box這樣填充和邊框不會增加元素的總寬度/高度（如果指定的話）。
並且不要在同一頁面內多次使用相同的id，將其轉換爲類。

.block { 
 
    background: url(Images/Testimonials/bg.gif); 
 
    width: 50%; 
 
    padding: 0 6px; 
 
    float: left; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="block"> 
 
    <h3>Name</h3> 
 
    <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
</div> 
 

 
<div class="block"> 
 
    <h3>Name</h3> 
 
    <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
</div> 
 
<div class="block"> 
 
    <h3>Name</h3> 
 
    <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
</div> 
 

 
<div class="block"> 
 
    <h3>Name</h3> 
 
    <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
</div> 
 
<div class="block"> 
 
    <h3>Name</h3> 
 
    <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
</div> 
 

 
<div class="block"> 
 
    <h3>Name</h3> 
 
    <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
</div>

來源

2017-02-25 23:41:17 pol

你不得不增加幾div元素，但是這會工作。

#block { 
 
background: url(Images/Testimonials/bg.gif); 
 
width: 500px; 
 
padding: 0px 6px 0 6px; 
 
} 
 
#table { 
 
    display: table; 
 
} 
 

 
#tableRow { 
 
    display: table-row; 
 
} 
 

 
#block { 
 
    display: table-cell; 
 
}

<div id="table"> 
 
    <div id="tableRow"> 
 
    <div id="block"> 
 
     <h3>Name</h3> 
 
      <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
    </div> 
 

 
    <div id="block"> 
 
     <h3>Name</h3> 
 
      <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
    </div> 
 
    </div> 
 

 
    <div id="tableRow"> 
 

 
    <div id="block"> 
 
     <h3>Name</h3> 
 
      <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
    </div> 
 

 
    <div id="block"> 
 
     <h3>Name</h3> 
 
      <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
    </div> 
 
    </div> 
 

 
    <div id="tableRow"> 
 

 
    <div id="block"> 
 
     <h3>Name</h3> 
 
      <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
    </div> 
 

 
    <div id="block"> 
 
     <h3>Name</h3> 
 
      <p class="content"><span class="laquo">&nbsp;</span>Review<span class="raquo">&nbsp;</span></p> 
 
    </div> 
 
    </div> 
 
<div>

來源

2017-02-25 23:45:14 Mers

如何定位多個div以排隊

回答

相關問題