划分“内容"区域分为两列? [英] divide "content" area into two columns?

问题描述

我正在考虑从HTML表格过渡到纯CSS布局.到目前为止，让我感到困惑的一件事是如何正确地布局页面.

I'm looking at making the transition from HTML tables to pure CSS layouts. So far, the one thing that eludes me is how to layout a page properly.

我可以做到:

• 标题
• 向左导航
• 内容
• 页脚

像这样:

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

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

However, on some pages I want to be able to divide the "content" area into something like the following:

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

任何人都知道将如何做这样的事情吗?甚至是一个很好的网站，可以帮助解决这类问题?

Anyone know how something like this would be done? Or even a nice website that helps with this kind of thing?

推荐答案

首次布局预览(在线演示 ):

first layout preview (online demo):

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

第二版面预览(在线演示):

Second layout preview (online demo):

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

css is also similar, by the way we added some css rules to target new div's:

/* 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;
}

更新:改进的样式

这篇关于划分“内容"区域分为两列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！