css - 结合固定元件和流体元件 - 无工作台

Question

我想结合固定元素和流体元素。与<table>这很简单，但我想要无 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>