複数のdivを一列に並び替える方法

Question

2つの行が並んでいるように6つの同じ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; 
} 

Answer 1

あなたはfloat: leftを使用していますが、divを50％の幅を与えることができます。
を埋め込むと、要素の幅と高さ（指定されている場合）の合計が増加することはありません。
同じ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>