Question

我有6个相同的div，我想排队，以便有3行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，将其转换为类。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何定位多个div来排队

2 个答案: