2列div布局:右列有固定宽度,左侧流体

Question

我的要求很简单: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 | 
|----------------------- -------|

请指教.非常感谢!

Answer 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;
}??

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

Answer 2

请参阅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;

Answer 3

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

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

Answer 4

迄今为止最简单,最灵活的解决方案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}

Answer 5

我想建议一个尚未提及的解决方案：使用 CSS3calc()来混合%和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 中重新创建布局。