19

到目前为止，我发现的最佳解决方案是：

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

但事实并非如此。你看，我有三列；其中两个需要避免显式调整大小。好吧，第二个确实需要调整大小；但不完全。

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

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

最终结果大致如下所示：

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

对于表格，我只需这样做：

<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 的布局。有任何想法吗？

4

4 回答 4

28

您可以通过使用float:left第一列、float:right最后一列并制作中心列来做到这一点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;
}

注意：有必要在 HTML 中将右列放在中心列之前（见上文，在 HTML 中 col3 位于 col2 之前），以确保当浏览器呈现中心列时，它知道如何正确呈现现有浮动元素。

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

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

于 2012-07-09T06:58:49.930 回答
0

这也可以通过嵌套 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>

请阅读如何使用 css div 创建 3 列布局以了解更多信息。

于 2013-12-22T20:54:29.227 回答
0 
<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

您可以根据需要调整宽度百分比。

于 2014-10-30T14:11:11.833 回答
0

您还需要输入“display:inline;” 因为 div 通常以块的形式显示。如果没有内联，它将显示为三行而不是三列。

于 2016-04-12T15:16:23.923 回答