组合固定和流体元素 - 无表格

Question

我想结合固定元素和流体元素。使用<table>非常简单，但我希望无表格。

使用table： http://jsfiddle.net/Tam7z/

但是，如果不使用表格，只需使用divs和CSS？

HTML：

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
<td width="80" class="a">FIXED</td>
<td class="b">FLUID</td>
  </tr>
</table>

CSS：

table { background: #f4f4f4 }
.a { background: #CCC }
.b { background: #999 }

/* */
* { font-family: sans-serif }
td { padding: 5px }
p { color: #CCC; font-style: italic; margin-top: 40px; font-weight: 100 }

Answer 1

像这样：http://jsfiddle.net/NicoO/Tam7z/1/

这是一种非常简单的布局方式。但默认情况下，这两个元素的高度可能不同。此外，您不能垂直对齐此元素内的元素。您应该使用min-width作为正文或父项，以防止流体div变得太小。

#left
{
    float: left;
    width: 150px;
    background-color: lightgray;
}

#right
{
    margin-left: 150px;
    background-color: gray;
}

HTML

<div id="left">Fixed</div>
<div id="right">Fluid</div>

Answer 2

不使用 HTML 表，您可以使用CSS tables。只需将父元素的显示属性设置为table即可。然后，子元素将显示table-cell。固定行显然具有固定宽度，流体表单元格将填充宽度为100%的剩余空间。您也可以使用vertical-align:middle垂直居中.row元素。

EXAMPLE HERE

<div class="table">
    <div class="row fixed">FIXED..</div>
    <div class="row fluid">FLUID..</div>
</div>

CSS

.table {
    background: #f4f4f4;
    display:table;
    height:100px;
}
.row {
    display:table-cell;
    vertical-align: middle;
    padding:0 20px;
}
.row.fixed {
    background: #CCC;
}
.row.fluid {
    background: gold;
    width:100%;
}

此方法为well supported，IE7及更低版本除外。