2

したがって、次の図のように、div 内で項目を垂直に積み重ね、複数の div を水平に積み重ねたいと思います。

サンプルレイアウト

各 div は、クラス名で定義されます。floatbox

<div class="floatbox">
    <label>Screening Type:</label>
    <select></select>
</div>

次のcssを適用していました

.floatbox {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding-top: 5px;
    float: left;
}

IE8 のため、フロートが必要will treat it as a block level element unless you use floatです。ただし、追加すると、アイテムが移動します。2 つの要素を追加することでこれを修正できます<br\>が、それが最善の解決策かどうか疑問に思っています。

例については、このフィドルを参照してください

4

2 に答える 2

4

問題は、すべての floatbox 要素が同じ高さを持っているわけではないため、高さを指定することで修正できます。

.floatbox {
    ...
    height:45px;
    ...
}

あなたのjsfiddleの例でうまく機能します。

浮動要素で「改行」を強制する別の方法は、cssclearプロパティを使用することです。

<div style="clear:both"></div>

これを4番目のdivボックスごとに配置して、そこで壊れることを確認します。次に、固定の高さを使用する必要はなく<br>、コードからすべてのタグを削除できます（両方のソリューションで）

于 2013-07-29T14:16:46.637 に答える
0

上記の答えを実行できますが、display:inline-block を使用する場合、実際には float はまったく必要ありません。http://jsfiddle.net/ApKHE/10/ボタンを右のボックスの下に配置するためにフロートに追加しただけですが、好きな場所に配置できます。

.floatbox {
display: inline-block;
width: 175px;
margin: 0;
padding-top: 5px;

}
.floatbox input, select, label {
    width: 150px;
    margin: 0px;
}
.EntryFieldSet {
    width: 735px;
    padding-left: 15px;
    overflow: hidden;
}
#screeningButtons{
    float:right;
    padding-right:30px;
}
于 2013-07-29T14:21:22.957 に答える