CSS流体'专栏'

Question

什么是在CSS中获得此布局的最佳方式？想象我有两个div,两个内部div中的两个div,第一个具有特定的宽度设置,第二个div预计会占用剩余的空间.

一般来说,我最终会在第二列上设置一个特定的宽度,并在包含div宽度改变的最后管理更新.

如果我浮动固定而不是流体,流体柱将包裹在固定的div下面(不是想要的).

+-------+  +--------------------------------------+
| fixed |  |                                      |
+-------+  |               fluid                  |
           |                                      |        
           |                                      |
           +--------------------------------------+

<div>
  <div>fixed</div>
  <div>fluid</div>
</div>

这必须是一个完全css的解决方案,没有javascript框架 - 理想情况下,最常用的浏览器可以使用最少的"hackage"(如果有的话).

希望ASCII艺术作品,

谢谢.

Answer 1

标记

<div id="fixed">fixed content</div>
<div id="fluid">fluid content</div>

css

#fixed {
  float: left;
  width: 13em;
  margin-right: -14em;
}
#fluid {
  margin-left: 14em;
}

这应该够了吧.我在我的个人网站上使用它.利润率使它保持在同一水平.