使每個div之間有相同的距離使用HTML？

Question

我有這個div類叫做'answer_box'，每個頁面他們將會有4個不同的答案框，每次都有不同的文字。我想讓每個答案在彼此之間有相同的距離，不管箱子裏有很多文字還是很少，以保持設計的一致性。

我的html代碼：

<div id="app"> 

    <div class="answer_box"> 
     <div class="answer_checkbox"></div> 
     <span class="answers"> little bit of text</span> 
    </div> 

    <div class="answer_box"> 
     <div class="answer_checkbox"></div> 
     <span class="answers">you have priotrtoities over the people on the opposite direction</span> 
    </div> 

    <div class="answer_box"> 
     <div class="answer_checkbox"></div> 
     <span class="answers">you have priotrtoities over the people on the opposite direction</span> 
    </div> 

</div> 

的jsfiddle是在這裏：http://jsfiddle.net/24E6W/1/

Answer 1

使用下面的CSS

.answer_box { 
    margin-top: 20px; 
    clear:both; 
    overflow: hidden; 
} 

Answer 2

只需添加這2個屬性的名爲 「.answer_box」

.answer_box{ 
margin-top: 20px; 
border-top:1px solid #000000; 
display:block; 
clear:both; 
overflow:hidden; 
} 

結帳的jsfiddle here類...

Answer 3

任一組min-height on answer_box DIV覆蓋最深的盒子，或者讓jQuery的爲你做它：

using min-height (css only)

quick fiddle using jquery

這將使盒相同的高度最高的一個，每個答案之間的距離設定由margin-top:規則。我假設.answer_checkbox DIV需要是一致的高度

Answer 4

這是你想要的效果？ jsfiddle.net/24E6W/3/

.answer_box { 
margin:30px 0px; 
height:50px; 
} 
.answer_checkbox { 
height: 50px; 
width: 50px; 
background-color: black; 
float: left; 
margin-right: 5px; 

}