如何将多个Divs放置以排列

Question

我有6个相同的divs，我要排队，以便有3行2为2。如果我让他们漂浮：左他们弄乱了布局

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;
}

Answer 1

您可以使用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>

Answer 2

您必须添加一些额外的 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>