强制<div>留在一个地方</div>

Question

我有两个div，一个是左边的，一个是右边的。左边占70％，右边占30％。我如何做到这一点，左边的东西（内容不同）到达下一行时达到70％？现在它只是推动我的右侧div。

#left {
float: left;
width: 69%;
padding-left: 50px;
}
#right {
float: right;
width: 30%;
padding-right: 50px;

}

Answer 1

因为你有这样的极端填充，盒子模型有点搞砸所以改变它，你也应该漂浮两个 divs左：

#left {
float: left;
width: 70%;
padding-left: 50px;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

#right {
float: left;
width: 30%;
padding-right: 50px;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

http://jsfiddle.net/gbqtQ/1/（调整结果窗口大小以确定它是否适合您）

：）

Answer 2

您只需删除填充。

#left {
float: left;
width: 70%;
}
#right {
float: right;
width: 30%;
}

jfiddle example:

如果需要填充，请添加内部div以进行填充。

Answer 3

padding & borer将width添加到div，您可以使用box-sizing强制他们不要像这样添加宽度：

#left {
float: left;
width: 70%;
    color: #fff;
    background: #600;  
   padding-left: 50px;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

http://jsfiddle.net/KKt3U/1/