Question

我正在寻找一种创建CSS布局的方法，其中左列是流动的，右列是使用下面的确切标记修复的。我不认为这是可能的。我错了吗？

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

Answer 1

是的。试试这个：

<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。

Answer 2

试一试：

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

Answer 3

此时可能不是一个可行的解决方案，但如果你不喜欢使用尖端的CSS，你也可以使用CSS3 flex box module。使用供应商特定的前缀，它目前在Firefox和基于Webkit的浏览器（如Safari和谷歌浏览器）中受支持。

<!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 和。边栏

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

3 个答案: