Question

我正在考虑从HTML表转换为纯CSS布局。到目前为止，我不知道如何正确布局页面。

我能做到：

头
左导航
含量
页脚

所以这样：

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

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

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

任何人都知道这样的事情会怎么做？甚至是一个很好的网站，有助于这种事情？

Answer 1

第一次布局预览（online demo）：

enter image description here

的 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; }

更新改进了样式

Answer 2

给一个CSS网格系统。该网站列出了一些：10 Really Outstanding and Useful CSS Grid Systems

Answer 3

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

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

Answer 4

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

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

div下面的

添加：

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

css就是：

.clear {clear:both;}

在明确的情况下，您的第三个div将为您提供所需的布局。

Answer 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;
            }
        }

将“内容”区域划分为两列？

5 个答案:

第一次布局预览（online demo）：

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