CSS fluid 'column‘

Question

在CSS中获得这个布局的最好方法是什么？假设我有三个div，两个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;
}

这应该能起到作用。我在我的个人网站上使用它。利润率使其保持在同一水平。

Answer 2

您可以使用支持流体柱的Emastic CSS Framework。这里的Link是一个类似于你的"ASCII艺术作品“的工作示例:)

Answer 3

希望这至少能帮助你入门：

* {
   margin:0;
}

div#wrapper {
   margin:0;
   height:auto !important; //IE Hack
   height:100%; //IE Hack
   min-height:100%;
   overflow:auto
}

div#fixed{
   float:left;
   position:absolute;
   background-color:red;
   margin:0;
   height:200px;
   width:200px
}

div#fluid{
   float:right;
   position:absolute;
   left:200px;
   background-color:blue;
   display:block;
   height:80%;
   width:60%
}

“包装器”将是您的包装器div。我只将流体柱的宽度设置为60%，这样您就可以看到它应该流畅地工作。我在Opera10、IE6和Firefox3中测试了这一点，只有一些小问题。如果您将流体柱的宽度设置为100%，IE希望在右侧追加额外的200px。我相信在某个地方会有解决这个问题的方法。