CSS 流体 'column'

Question

在 CSS 中获得此布局的最佳方法是什么？想象一下，我有三个 div，两个 div 在另一个里面。在两个内部 div 中，第一个具有特定的宽度集，第二个 div 预计会占用剩余空间。

通常我会在第二列上设置一个特定的宽度，并在包含的 div 宽度发生变化时设法更新它。

如果我 float fixed 而不是 fluid，则 fluid 柱将包裹在 fixed 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;
}

这应该可以解决问题。我在我的个人网站上使用它。边距使它们都保持在同一水平。