Question

我正在尝试创建一对并排放置的DIV，每个DIV占据容纳它们的div的一半宽度。与浮动并排：左边工作正常，但我的元素没有正确对齐。我做了一个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;
}

Answer 1

尝试清除半宽元素后的浮点数，例如：

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

上述解决方案是解决问题的一些自我清理的好处！请参阅demo

Answer 2

在你的第二个半宽div之后添加以下内容：

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

Answer 3

问题似乎与.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;
}

并排DIV不对齐

3 个答案: