1

我正在尝试创建几个并排放置的 DIV，每个 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

在第二个半角 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>

使用box-sizingCSS3 中的属性也可以在不需要您更改标记的情况下使用，但旧浏览器不支持它：

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