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

最も深いボックスをカバーするように div を設定min-heightするanswer_boxか、jquery に任せます。

min-height の使用 (css のみ)

jqueryを使ったクイックフィドル

これにより、ボックスは最も高いボックスと同じ高さになり、各回答間の距離はmargin-top:ルールによって設定されます。.answer_checkboxdivは一貫した高さである必要があると仮定しています

于 2013-05-16T10:18:13.057 に答える
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

これはあなたが望む効果ですか？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 に答える