<分区>
html - 使用 float 并排对齐 div 元素
我主要是一名后端开发人员，但我正在努力使布局正确。基本上我正在创建一个 ListView 页面，该页面将在左侧包含一个 div 标记，该标记具有一堆过滤器(下拉列表、复选框等)。在屏幕的右侧，我将有一个包含网格的 div 标记。这似乎有效，但当我在头顶上方或屏幕未最大化时看起来很糟糕。我这样做对吗？基本上这就是我所追求的:
我为此做的 CSS 就这么简单:
.filterContainer {
width:20%;
float:left;
}
.gridContainer {
width:79%;
float:right;
}
基本上 .filterContainer 是我左边的 div (dLeft) 而 .gridContainer 是我右边的 div (dRight ).这对我想要实现的目标有效吗？结果如下所示:
http://i.imgur.com/WFasMF1.png
但是，如果我调整窗口大小，我最终会得到以下结果:
http://i.imgur.com/4u9HRlK.png
我想这很正常，因为我正在调整大小，但我的 css 有效吗？
最佳答案
首先，当您处理基于网格的布局时，请始终确保您使用
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
Note:
*is nothing but a universal selector which will apply the defined properties to every element. Inorder to target specific elements, use more specific selectors likediv.class_nameetc
现在，你为什么需要它？
如果你在下图中看到..
CSS 在框外而不是框内添加 margin、padding 和 border，这是内容框的默认行为，所以当您使用我分享的片段，它改变了盒子模型的行为，并使元素计算元素内的 border 和 padding。
关于您的问题，您提供的 CSS 是完美的，但是 position、float 或 margin 甚至 uncleared floating元素 任何事情都可能导致您面临的问题，所以如果可以的话，请考虑更改您的 CSS 样式表，如果您使用 box-sizing: border-box;
您如何实现这一点？
好吧，显然，我不会为您提供全部内容，而只是提供如何实现此目的的一般思路，因为我看到您正在使用 width: 79%;
现在，我有两个元素向左浮动，改变了盒子模型，所以我不必为任何元素使用 -1% width元素。当您需要间距时，在网格内嵌套更多 block ，然后使用 padding 代替 margin
<div class="wrap">
<div class="left_wrap"></div>
<div class="right_wrap"></div>
</div>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
.wrap:after {
clear: both;
display: table;
content: "";
}
.wrap > div {
min-height: 300px;
}
.wrap .left_wrap {
width: 30%;
float: left;
border: 3px solid #f00;
}
.wrap .right_wrap {
border: 3px solid #000;
width: 70%;
float: left;
}
关于html - 使用 float 并排对齐 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21408574/