如何定位多个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以排队

回答

相关问题