html - 当左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 列。

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

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

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