Html 三列DIV布局动态；左 = 固定，中心 = 流体，右 = 流体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11389588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three Column DIV layout dynamics; left = fixed, center = fluid, right = fluid
提问by Don Cullen
The best solution I found so far was:
到目前为止，我找到的最佳解决方案是：
http://jsfiddle.net/kizu/UUzE9/
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.
- 所有三列都有固定的高度：65px，准确地说。
- 第一列的宽度设置为 285px。
- 中心列没有定义大小；它只会占用剩余的空间。
- 右列将根据其中的任何内容调整自身大小。没有明确设置大小，它只是根据内容调整大小，让中心列占据剩余的空间。
- 每列的上方、下方和之间没有空格。
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/
上表代码结果：http: //jsfiddle.net/zMNYb/
But I'm trying to move away from using tables and using a DIV-based layout. Any ideas?
但我试图摆脱使用表格和使用基于 DIV 的布局。有任何想法吗？
回答by techfoobar
You can do this by using float:leftfor first column, float:rightfor the last column and making the center column float:none
您可以通过使用float:left第一列，float:right最后一列并制作中心列来做到这一点float:none
Updated Demo: http://jsfiddle.net/L85rp/3/
更新演示：http: //jsfiddle.net/L85rp/3/
HTML
HTML
<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>
CSS
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.
注意：有必要将右列放在 HTML 中的中心列之前（见上文，在 HTML 中 col3 在 col2 之前）以确保浏览器在呈现中央列时，它知道如何正确呈现现有浮动元素。
Updated CSS
更新的 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/
更新演示：http: //jsfiddle.net/ew65G/1/
回答by Manoj Kumar
This can also be achieved by nested div concept. All you need to do is divide the div section which you want as 3 columns as follows
这也可以通过嵌套 div 概念来实现。您需要做的就是将您想要的 div 部分划分为 3 列，如下所示
<div id="main">
<div id="column-1"></div>
<div id="column-2">
<div id="column-2-1"></div>
<div id="column-2-2"></div>
</div>
</div>
Please go through How to create 3 column layout using css divto know more about this.
请查看如何使用 css div 创建 3 列布局以了解更多信息。
回答by Charles Matanda
<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>
You can adjust width % as required.
您可以根据需要调整宽度 %。
回答by Harry Fairbanks
You will also need to put "display:inline;" as a div normally displays in block form. Without the inline it will appear as three rows and not three columns.
您还需要输入“display:inline;” 作为 div 通常以块形式显示。如果没有内联，它将显示为三行而不是三列。
