纯HTML:如何在不使用"float"的情况下创建此布局？

Question

我正在尝试为我的网站创建以下布局:

<table width="80%" align="center">
    <tr>
        <td width="80%" bgcolor="red">MAIN CONTENT</td>
        <td bgcolor="green">SIDEBAR</td>
    </tr>       
</table>

正如您想象的那样,这将创建一个80%的页面宽度的表格,内容区域是该宽度的80%,而侧边栏则填充其余部分.

但这一次我想使用DIV或SPAN或基本上是无桌面设计.现在,我知道我可以使用两个DIV并使用它们的"float"属性来实现这一点,但我希望看看是否有更简单,更符合逻辑的东西:

<div align="center" style="width:80%">
    <span style="width:80%;">
        MAIN CONTENT
    </span>
    <span>
        SIDEBAR
    </span>
</div>

不幸的是,上面根本不起作用,我不知道为什么.有人可以告诉我最纯粹的HTML实现,它不使用"浮动"吗？

我现在在互联网上看到的每个网站都至少有一个侧边栏,所以我希望你的回答能帮助我以外的很多人.谢谢!

Answer 1

为此,您可以在不使用浮动通过使用适当的标记和display: table;,display: table-cell;用CSS.

HTML:

<div id="wrap">
      <div id="sidebar">
        I am a sidebar!
      </div>
      <div id="mainContent">
        I am some main content
    </div>
</div>

CSS:

#wrap
{
    width: 100%;
    height: 400px;
    display: table;
}

#sidebar
{
    display: table-cell;
    border: 1px dashed #f00;
}

#mainContent
{
    display: table-cell;
    width: 80%;
    border: 1px dashed #0f0;
}

但要注意,IE7及更低版本不支持此CSS.

http://jsfiddle.net/57Fvk/

使用几乎相同的标记(一个额外的div),您还可以使用浮点数来创建所需的布局:

HTML

<div id="wrap">
      <div id="sidebar">
        I am a sidebar!
      </div>
      <div id="mainContent">
        I am some main content
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS:

#wrap
{
    width: 100%;
    height: 400px;
}

#sidebar
{
    width: 20%;
    float: left;
    background: #f00;
    height: 100%;
}

#mainContent
{
    width: 80%;
    float: left;
    background: #0f0;
    height: 100%;
}

.clear
{
    clear: both;
}

http://jsfiddle.net/shzLc/