Html 将“内容”区域分成两列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10594197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
divide "content" area into two columns?
提问by Fittersman
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.
我正在考虑从 HTML 表格过渡到纯 CSS 布局。到目前为止，我没有想到的一件事是如何正确布局页面。
I can do:
我可以：
- header
- left navigation
- content
- footer
- 标题
- 左侧导航
- 内容
- 页脚
So like this:
所以像这样：
________________________
| 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?
有谁知道怎么做这样的事情？或者甚至是一个很好的网站，可以帮助处理这种事情？
回答by Vladimir Starkov
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>
/* 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):
第二个布局预览（在线演示）：
#content-wrap#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>
csscss规则来定位新的 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;
}
update:improved styles
更新：改进的样式
回答by Paul Marrington
Give one of the CSS grid systems a go. This site lists some:10 Really Outstanding and Useful CSS Grid Systems
试一试 CSS 网格系统之一。该站点列出了一些：10 个真正出色且有用的 CSS 网格系统
回答by miqbal
http://grids.heroku.com/fluid_grid?column_amount=3
http://grids.heroku.com/fluid_grid?column_amount=3
You can add and delete these grids.
您可以添加和删除这些网格。
回答by Liam Kenneth
For your content div set that a width then create three divs for the info sections.
为您的内容 div 设置一个宽度，然后为信息部分创建三个 div。
The top two give a width and make sure they dont exceed the total of the container content. float one left and the other right.
前两个给出宽度并确保它们不超过容器内容的总和。一个向左浮动，另一个向右浮动。
underneath the divs add:
在 div 下面添加：
<div class="clear"></div>
The css for that is:
css 是：
.clear {clear:both;}
Under the clear will be your third div which will give you that layout you want.
在 clear 下将是您的第三个 div，它将为您提供所需的布局。
回答by Arun Kumar
Add another inner table in the content column. Make this table as server (runat="server). Specify the condition in code behind file and make the table visible as false or true. Here my example contains a nested table. And i hide it when i had a specific condition via code behind file on specific events.
在内容列中添加另一个内表。将此表设为服务器 (runat="server)。在代码隐藏文件中指定条件并使该表可见为 false 或 true。这里我的示例包含一个嵌套表。当我通过代码隐藏特定条件时，我将其隐藏特定事件的文件。
eg:
例如：
<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>
Code behind file:
文件隐藏代码：
protected void Page_Load(object sender, EventArgs e)
{
if (Session["value"].ToString == ValueType)
{
innertab.Visible = false;
}
}
