2列 div 布局: 右列固定宽度，左流体

我的要求很简单: 右边有固定大小的两列。不幸的是，我找不到一个可行的解决方案，无论是在堆栈溢出还是在谷歌。如果我在自己的上下文中实现，那里描述的每个解决方案都会失败。目前的解决方案是:

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

请指教，非常感谢！

205850 次浏览
小开
最佳答案

移除左列上的浮动。

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

例如: http://jsfiddle.net/jackJoe/fxWg7/

小开

请参阅 http://www.alistapart.com/articles/negativemargins/，这正是您所需要的(例子4在这里)。

<div id="container">
<div id="content">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>
</div>


<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>

#container {
width: 100%;
background: #f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: right;
小开

嘿，你可以做的是对两个容器都应用一个固定的宽度，然后使用另一个 div 类，其中 clear: both，like

div#left {


width: 600px;
float: left;
}


div#right {


width: 240px;
float: right;


}


div.clear {


clear:both;


}

在左右容器下放置一个清晰的 div。

小开

为了避免将右栏放在左栏之前，最好使用负的右边距。

并且通过包含@media 设置来“响应”，这样在狭窄的屏幕上，右栏就会落在左栏下面。

<div style="background: #f1f2ea;">
<div id="container">
<div id="content">
<strong>Column 1 - content</strong>
</div>
</div>
<div id="sidebar">
<strong>Column 2 - sidebar</strong>
</div>
<div style="clear:both"></div>


<style type="text/css">
#container {
margin-right: -300px;
float:left;
width:100%;
}
#content {
margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
width:300px;
float:left
}
@media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}
}
</style>
小开

我已经简化了: 我已经编辑了 Jackjoe 的答案。高度自动等我认为不需要。

CSS:

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}


#leftCol {
background: #e8f6fe;
width: auto;
}


#rightCol {
float:right;
width:30%;
background: #aafed6;
}


.box {
position:relative;
clear:both;
background:#F39;
}
</style>

HTML:

<div id="container">


<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>


<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>


<div id="leftCol">


<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>


<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

罗姆以我为荣，以我为荣。(咒语)。罗姆以我为荣，以我为荣。(咒语)。

</div>


</div>


<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>


<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
小开

这是一个通用的、 HTML 源代码有序的解决方案，其中:

  • 第一列在源顺序是流体
  • 按源顺序排列的第二列是固定的
    • 此列可以使用 CSS 向左或向右浮动

右侧固定栏/第二栏

#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>

左侧固定/第二列

#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>

另一种解决方案是使用 显示: 表格单元格; 这会导致列的高度相等。

小开

到目前为止使用 table display的最简单、最灵活的解决方案 :

HTML，左 div 第一，右 div 第二... ... 我们从左到右读写，所以将 div 从右到左放置没有任何意义

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

CSS:

.container {
display: table;
width: 100%;
}


.left {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}​​


.right {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}

个案例子:

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}


// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}
小开

我想提出一个尚未提及的解决方案: 使用 CSS3的 calc()混合 %和 px单位。calc()现在有 很好的支持，它允许快速构建相当复杂的布局。

下面是代码的 JSFiddle链接。

HTML:

<div class="sidebar">
sidebar fixed width
</div>
<div class="content">
content flexible width
</div>

CSS:

.sidebar {
width: 180px;
float: right;
background: green;
}


.content {
width: calc(100% - 180px);
background: orange;
}

这是另一个 JSFiddle，它演示了这个概念如何应用于更复杂的布局。我在这里使用了 SCSS，因为它的变量允许灵活和自描述的代码，但是如果使用“硬编码”值不成问题的话，布局可以很容易地用纯 CSS 重新创建。


提交答案