将“内容”区域分成两列？答案

【问题标题】：divide "content" area into two columns?将“内容”区域分成两列？
【发布时间】：2013-03-31 05:21:16
【问题描述】：

我正在考虑从 HTML 表格过渡到纯 CSS 布局。到目前为止，让我难以理解的一件事是如何正确布局页面。

我能做到：

标题
左侧导航
内容
页脚

像这样：

________________________ 
|      Header           |
|_______________________|
| Left |     Content    |
| Nav  |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

但是，在某些页面上，我希望能够将“内容”区域划分为以下内容：

________________________ 
|      Header           |
|_______________________|
| Left | info | info    |
| Nav  |      |         |
|      |      |         |
|      |      |         |
|      |      |         |
|      |______|_________|
|      | Other info     |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

有人知道这样的事情是怎么做的吗？或者甚至是一个很好的网站来帮助解决这种事情？

【问题讨论】：

标签： css layout html

【解决方案1】：

第一个布局预览 (online demo)：

html：

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>

CSS：

/* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

第二版布局预览（online demo）：

html 与第一个布局非常相似，但我们在#content-wrap 中包含一个包装器：

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>

css 也类似，顺便说一下，我们添加了一些css 规则来定位新的 div：

/* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

更新：改进样式

【讨论】：

那么这里的关键是强制侧边栏为绝对位置吗？这样你可以在其他地方使用左浮动，它不会冲突？
@Fittersman 我记得更好、更简单（没有绝对位置）的方式来处理这个标记并更新了答案。在所有领域我们都可以使用float而不会发生冲突

【解决方案2】：

试试其中一个 CSS 网格系统。本站列出了一些：10 Really Outstanding and Useful CSS Grid Systems

【讨论】：

【解决方案3】：

http://grids.heroku.com/fluid_grid?column_amount=3

您可以添加和删除这些网格。

【讨论】：

【解决方案4】：

为您的内容 div 设置一个宽度，然后为信息部分创建三个 div。

前两个给出宽度并确保它们不超过容器内容的总和。一左一右浮动。

在 div 下方添加：

<div class="clear"></div>

对应的css是：

.clear {clear:both;}

在 clear 下将是您的第三个 div，它将为您提供所需的布局。

【讨论】：

【解决方案5】：

在内容列中添加另一个内表。将此表设为服务器 (runat="server)。在文件后面的代码中指定条件并使表可见为 false 或 true。这里我的示例包含一个嵌套表。当我通过代码后面有特定条件时将其隐藏关于特定事件的文件。

例如：

<body>
    <form id="form1" runat="server">
    <div>

        <table >
            <tr>
                <td colspan="2">
                    header</td>
            </tr>
            <tr>
                <td style="height:50px;">
                    left nav
                </td>
                <td>
                    content

                    <table class="style1" id="innertab" runat="server">
                        <tr>
                            <td>
                                info</td>
                            <td>
                                info</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                other info</td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    footer</td>
            </tr>
        </table>

    </div>
    </form>
</body>

文件隐藏代码：

protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["value"].ToString == ValueType)
            {
                innertab.Visible = false;
            }
        }

【讨论】：

使用表格布局是布局的一个坏例子
那么让它可见或隐藏的代码在哪里呢？ @fittersman：div idea 比 table 更适合做你的设计。在 matmuchrapna 的代码中使用我上面提到的隐藏概念。