CSS流体“列”

加价

<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;
}

你可以用 Emastic CSS Framework 支撑液柱的。在这里 Link 工作示例是否类似于您的“ASCII艺术作品”:

希望这至少能帮助您开始:

* {
   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%,这样你就可以看到它的作用是流动的。我在Opera 10、IE 6和Firefox 3中对此进行了测试,只有一些小问题。如果将流体柱的宽度设置为100%,IE希望在右侧附加一个额外的200px。我肯定在某个地方有一个解决办法。

事实上,我不久前发现了一个更简单的解决方案。可以很好地追溯到IE7。#fluid div将在固定固定点旁边向上滑动,并占用剩余空间,同时为所有响应站点保持良好的流动性。

#fixed{
     width:200px;
     float:left;
}
#fluid{
    overflow:hidden;
}