1

私は、それらを保持する div の幅の半分を占めるそれぞれが並んで座るいくつかの DIV を作成しようとしています。float: left を使用して並べて取得することは適切に機能していますが、要素が適切に整列していません。私が何を意味するかを示すために、jsfiddle を作成しました。 http://jsfiddle.net/kzFqU/

ご覧のとおり、問題ないように見えますが、結果の正方形を非常に広くすると、入力の正しい配置がうまくいきません。 

<div class="container-narrow">
<div class="form_field">
    <label>Full Width</label>
    <input type="text" name="what">
</div>
<div class="form_field halfwidth">
    <label>Half Width</label>
    <input type="text" name="what">
</div>
<div class="form_field halfwidth">
    <label>Also Half Width</label>
    <input type="text" name="what">
</div>
<div class="form_field">
    <label>Full Width</label>
    <input type="text" name="what">
</div>

そしてCSS

body {
padding-top: 20px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
background:whitesmoke;
}

.container-narrow {
    margin: 0 auto;
    background:white;
    border-radius: 10px;
    padding:10px;
}

.form_field {
    padding: 10px;
}

.form_field input {
    width:100%;
}

.form_field label {
    margin-bottom:0px;
}

.form_field input {
    clear:both;
}

.halfwidth {
    width: 45%;
    float: left;
}
4

3 に答える 3

1

次のような半角要素の後のフロートをクリアしてみてください。

.form_field:before,
.halfwidth:before {
    clear: both;
    display: block;
    content: "\0020";
    visibility: hidden;
}

上記の解決策は、問題を解決する自己クリアの良さです! デモを見る

于 2013-03-28T03:35:20.213 に答える
0

2 番目の半角 div の直後に次を追加します。

<div style="clear:both"></div>
于 2013-03-28T03:33:11.083 に答える
0

問題は、によって適用されるパディングにあるよう.form_fieldです。これにより、必要な効果が得られると思います： http://jsfiddle.net/cx8T2/

.halfwidth {
    width: 50%;
    float: left;
}

...

<div class="halfwidth">
    <div class="form_field">
        <label>Half Width</label>
        <input type="text" name="what">
    </div>
</div>
<div class="halfwidth">
    <div class="form_field">
        <label>Also Half Width</label>
        <input type="text" name="what">
    </div>
</div>

CSS3のプロパティを使用するbox-sizingと、マークアップをまったく変更しなくても機能しますが、古いブラウザーではサポートされていません。

.halfwidth {
    box-sizing: border-box;
    width: 50%;
    float: left;
}
于 2013-03-28T03:35:22.683 に答える