Question

我有一个名为'answer_box'的div类，每个页面都会有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;
}

Checkout jsfiddle here ...

Answer 3

在min-height div上设置answer_box以覆盖最深的框，或者让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;

}

使用html使每个div在彼此之间具有相同的距离？

4 个答案: