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

时间：2011-03-04 15:36:05

标签： css 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 | 
|----------------------- -------|

请指教。非常感谢！

8 个答案:

答案 0 :(得分：262)

删除左栏上的浮动。

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

答案 1 :(得分：66)

请参阅http://www.alistapart.com/articles/negativemargins/，这正是您所需要的（example 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;

答案 2 :(得分：29)

最好避免在左前方放置右列，只需使用负右边距。

通过包含@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>

答案 3 :(得分：10)

最简单，最灵活的解决方案到目前为止使用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}

答案 4 :(得分：4)

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

以下是代码的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中轻松地重新创建布局。

答案 5 :(得分：1)

这是一个通用的HTML源代码解决方案，其中：

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

固定/右列第二列

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

左侧固定/第二列

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

替代解决方案是使用display: table-cell;这导致高度相等的列。

答案 6 :(得分：0)

嘿，你可以做的是对两个容器应用一个固定的宽度，然后使用另一个清晰的div类：两者，如

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

在左右容器下放置一个明确的div。

答案 7 :(得分：-3)

我简化了它：我编辑了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>

Lorem ipsum dolor坐下来，精神上的adipistour elit。 Phasellus varius eleifend。 Lorem ipsum dolor sit amet，consectetuer adipiscing elit.Phasellus varius eleifend。

</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>
相关问题
最新问题