三列DIV布局动力学;左=固定，中心=流体，右=流体 [英] Three Column DIV layout dynamics; left = fixed, center = fluid, right = fluid

问题描述

通常，对于这种东西，我只是打了互联网找到一个很好的解决方案，并沿着。除了在我的情况下，这是一个有趣的独特案例，所以我不能找到一个解决方案。到目前为止，我发现的最好的一个是：

Normally, for this kind of stuff, I'd just hit the internet to find a good solution and move along. Except in my case, it's an interestingly unique case, so I wasn't able to find a solution. The best one 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.

• 所有三列的固定高度：65像素。


• 第一列的宽度设置为285像素。


• 中心列未定义尺寸;


• 右边的列会将其自身的大小调整为其中的任何内容。没有明确设置的大小，它只是根据内容调整大小，让中心列占用任何空间。


• 每列之上，之下和之间没有空格。

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

最终结果大致如下：

   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>

上表结果： http://jsfiddle.net/zMNYb/

但我试图离开使用表和使用基于DIV的布局。有任何想法吗？

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

感谢您的时间，帮助和考虑。

Thanks in advance for your time, assistance, and consideration.

推荐答案

您可以使用 float：left ， float：right 用于最后一列，并使中心列 float：none

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

更新的演示： 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;
}

---

/ strong>：需要在HTML中将右列放在中心列之前（请参阅上文，col3在HTML中位于col2之前），以确保当浏览器呈现中心列时，它知道如何在现有的浮动元素。

---

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.

更新CSS b

.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;
}

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

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