0

我有这个名为“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/

4

4 回答 4

1

使用以下 CSS

.answer_box {
    margin-top: 20px;
    clear:both;
    overflow: hidden;
}
于 2013-05-16T10:19:35.677 回答
0

这是你想要的效果吗？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;

}
于 2013-05-16T10:23:56.680 回答
0

只需将这 2 个属性添加到名为“.answer_box”的类中

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

在这里结帐 jsfiddle ...

于 2013-05-16T10:17:49.010 回答
0

要么min-height在answer_boxdiv 上设置以覆盖最深的框，要么让 jquery 为你做这件事：

使用最小高度（仅限 CSS）

使用 jquery 的快速小提琴

这将使盒子与最高的盒子高度相同，每个答案之间的距离由margin-top:规则设置。我假设.answer_checkboxdiv 需要保持一致的高度

于 2013-05-16T10:18:13.057 回答