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并使用它们的“浮动”属性来实现这一目标，但我希望看看是否有更简单，更符合逻辑的东西：

<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/

Answer 2

这是创建此布局的一种非常简单的方法：

http://jsfiddle.net/e94zc/

HTML：

<div id="page">
    <div id="content">
        Content
    </div>
    <div id="sidebar">
        Sidebar
    </div>
</div>

CSS：

#page{
    margin: 0 auto;
    width:80%;
    position: relative;
    }
#content{
    width:80%;
    position: absolute;
    top: 0;
}
#sidebar{
    position: absolute;
    top: 0;
    left: 80%;
    width: 20%;
}

纯HTML：如何在不使用“float”的情况下创建此布局？

2 个答案: