我正在尝试创建几个并排放置的 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;
}
最佳答案
尝试清除半 Angular 元素后的 float ,例如:
.form_field:before,
.halfwidth:before {
clear: both;
display: block;
content: "\0020";
visibility: hidden;
}
上面的解决方案是解决问题的一些 self 清除的好方法!查看demo
关于css - 并排DIV不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15673750/