三列DIV布局动态；左 = 固定，中心 = 流体，右 = 流体

问题描述

目前我找到的最佳解决方案是:

http://jsfiddle.net/kizu/UUzE9/

但这还不够.你看，我有三列；其中两个需要避免显式调整大小.嗯，第二个确实需要调整大小；但不完全是.

请允许我通过建立我一直试图满足的条件来进行澄清.

• 所有三列都有固定的高度:65px，准确地说.
• 第一列的宽度设置为 285 像素.
• 中心列没有定义大小；它只会占用剩余的空间.
• 右侧的列将根据其中的任何内容调整自身大小.没有明确设置大小，它只是根据内容调整大小，让中心列占据剩余的空间.
• 每列的上方、下方和之间没有空格.

最终结果大致如下:

标志 |播放器 |名称-----------------------------------------------------

对于表格，我会简单地这样做:

<tr><td width="285px" height="65px">标识</td><td height="65px">播放器</td><td width="1px" height="65px">帐户</td></tr>

上表代码结果:http://jsfiddle.net/zMNYb/

但我试图摆脱使用表格和使用基于 DIV 的布局.有什么想法吗?

解决方案

您可以使用 float:left 作为第一列，float:right 作为最后一列column 并使中心列 float:none

更新演示:http://jsfiddle.net/L85rp/3/

HTML

Column1
<div class="col3">Column3</div><div class="col2">Column2</div>

CSS

.col1 {背景颜色:#ddf；向左飘浮;}.col2 {背景颜色:#dfd；浮动:无；}.col3 {背景色:#fdd；浮动:对；}

注意:有必要在 HTML 中将右列放在中心列之前(见上文，在 HTML 中 col3 在 col2 之前)以确保当浏览器呈现中心列时，它知道如何围绕现有的浮动元素正确渲染.

更新的 CSS

.col1 {背景颜色:#ddf；向左飘浮;宽度:285px；高度:65px；}.col2 {背景颜色:绿色；浮动:无；高度:65px；溢出:隐藏；显示:表格单元格；/* 关闭它以将高度锁定在 65px */}.col3 {背景颜色:青色；浮动:对；高度:65px；}

更新演示:http://jsfiddle.net/ew65G/1/

The best solution I found so far was:

http://jsfiddle.net/kizu/UUzE9/

But that wasn't quite it. You see, I have three columns; two of which need to avoid being explicitly sized. Well, the second one does need to be sized; but not quite.

Allow me to clarify by establishing the conditions I've been trying to meet.

• All three columns have fixed height: 65px, to be precise.
• The first column's width is set to 285px.
• The center column has no size defined; it simply takes up whatever space is left.
• The right column will size itself to whatever content is in there. There is no size explicitly set, it simply resizes based on content, leaving the center column to take up whatever space is left.
• There is no whitespace above, below, and in between each column.

The end result would roughly look something like this:

   Logo     |            Player          |    Name
-----------------------------------------------------

For tables, I'd have simply done this:

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

Result of above table code: http://jsfiddle.net/zMNYb/

But I'm trying to move away from using tables and using a DIV-based layout. Any ideas?

解决方案

You can do this by using float:left for first column, float:right for the last column and making the center column float:none

Updated Demo: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

---

NOTE: It is necessary to place your right column before your center column in HTML (see above, col3 comes before col2 in the HTML) to make sure that when the browser renders the center column, it knows how to render correctly around the existing floating elements.

---

Updated CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Updated demo: http://jsfiddle.net/ew65G/1/

这篇关于三列DIV布局动态；左 = 固定，中心 = 流体，右 = 流体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！