我为此做的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在框外添加边距,填充和边框,而不是内部,这是默认的内容框行为,因此当您使用我共享的代码段时,它会更改框模型行为并使元素计算元素内的边框和填充.
对你的问题来说,你提供的CSS是完美的,但是位置,浮动或边距甚至未清除的浮动元素都可能导致你所面临的问题,所以如果可以的话,考虑改变你的CSS样式表,并且值得你使用Box-sizing：border-Box;
你是如何实现这一目标的？
嗯,很明显,我不会提供你所有的东西,但只是一般的想法如何实现这一点,因为我看到你使用宽度：79％;现在这就是为什么我建议你改变盒子模型的非常有力的原因.
现在,我有两个元素浮动到左边,盒子模型改变了,所以我不必为任何元素使用-1％宽度.当您需要间距时,在网格内嵌入更多块,然后使用填充而不是边距使用填充,尤其是浮动父元素.
<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;
}
