当左边的div是固定大小时，如何完全跨越右手div？

Question

我有两个div布局为inline-block。我希望左边的div具有固定的大小，并且要完全跨越线上剩余的内容 - 但是从不移动到下一行。所以，对于同一行的div。一个是固定的，另一个完全跨越。

我准备了一个JSFiddle，这不是我想要的，因为div是分开的。 以前做过这个的任何CSS专家？ http://jsfiddle.net/yT5Gc/1/

Answer 1

您可以尝试以下方法：

<强> HTML

<div id="container">
    <div id="div1">
        div 1
    </div>
    <div id="div2">
        div 2
    </div>
</div>

<强> CSS

#container { width: 100%; }
#div1 { width: 200px; float: left; border:1px solid; }
#div2 { border:1px solid; }

jsfiddle

Answer 2

以下CSS可以：

#left {width:80px; float: left;background-color: yellow;}
#right {background-color: red;}

我使用背景颜色来显示哪个是div。你必须使用浮点数而不是内联块。

我为你修改了小提琴：http://jsfiddle.net/Kennethtruyers/yT5Gc/3/

Answer 3

好的，这是完整的脚本。闪回：我实际上想要用DIV编写2列。

诀窍是将overflow属性设置为隐藏：

div {border: 1px solid red;}
#left {width: 120px; float: left;}
#right {width: 100%; overflow: hidden;}

这里的小提琴：http://jsfiddle.net/yT5Gc/7/