CSS固定流体柱没有额外的标记？

问题描述

| 我正在寻找一种创建CSS布局的方法，其中左列是流畅的，而右列则使用下面的确切标记进行固定。我认为不可能。我错了吗？

<div class=\"wrapper\">
  <div class=\"left\">Fluid Column</div>
  <div class=\"right\">Fixed Column</div>
</div>

解决方法

是的尝试这个：

<div id=\"wrapper\">
    <div id=\"left\">
        <div id=\"content\">
            ...
        </div>
    </div>
    <div id=\"right\">
        ...
    </div>
</div>

CSS：

#wrapper { width: 900px; }
#left { float: left; width: 100%; margin: 0 -100px 0 0 ; }
#content { margin: 0 100px 0 0; }
#right { float: right; width: 100px; }

注意：如果要使宽度为100％，请删除wrapper。 , 目前，这可能不是一个可行的解决方案，但是如果您不反对使用最新的CSS，那么也可以使用CSS3 flex box模块。使用供应商特定的前缀，Firefox和基于Webkit的浏览器（例如Safari和Google Chrome）当前都支持该前缀。

<!doctype html>
<style>
    .wrapper {
        display: -moz-box;
        display: -webkit-box;
        display: flexbox;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        flex-direction: lr; /* box-orient has been renamed in the most recent version of the draft */
        width: 100%;
    }
    .right {
            width:150px;
            background-color: #eee;
    }
    .left {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            flex-box: 1; /* box-flex has been renamed flex-box */
    }
</style>

<div class=\"wrapper\">
  <div class=\"left\">Fluid Column</div>
  <div class=\"right\">Fixed Column</div>
</div>

为了语义，您可能需要将.left和.right重命名为.content和.sidebar之类的名称 , 试一下：

* { padding:0px; margin:0px; }

.wrapper {
    position:absolute;
    width:100%;
    height:100%;
}
.left {
    position:absolute;
    top:0; bottom:0;
    left:0; right:150px;
    background-color:#999999;
}
.right {
    position:absolute;
    top:0; bottom:0;
    right:0; 
    width:150px;
    background-color:#AAAAAA;
}

固定标记标记额外