2列div布局：固定宽度的右列，左侧流体

小编典典

2列div布局：固定宽度的右列，左侧流体

html

我的要求很简单： 2列，其中正确的列具有固定的大小
。不幸的是，无论是在stackoverflow上还是在Google中，我都找不到可行的解决方案。如果我在自己的上下文中实现，那么那里描述的每个解决方案都会失败。当前的解决方案是：

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}



<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

我得到以上代码的以下内容：

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

请指教。非常感谢！

阅读 260

2020-05-10

共1个答案

小编典典

除去左列上的浮子。

在HTML代码处，右列必须位于左列之前。

如果右边有一个浮点数（和宽度），并且左边的列没有宽度和浮点数，它将很灵活：）

还要overflow: hidden对外部div 施加一个高度（可以是自动的），使其围绕两个内部div。

最后，在左侧列添加width: auto和overflow: hidden，这使左侧列与右侧列保持独立（例如，如果调整浏览器窗口的大小，并且右侧列触及左侧列，则没有这些属性，则左侧列将运行围绕正确的对象（具有此属性，它将保留在其空间中）。

HTML示例：

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS：

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

2020-05-10