使用 CSS/Div 设计页面布局，如 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9917791/
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
Design page layout using CSS/Div like HTML table
提问by JDev
Since i am new to CSS, i am not sure if the following page layout is possible using Div/CSS or shall i use HTML table?.
由于我是 CSS 新手，我不确定以下页面布局是否可以使用 Div/CSS 或我应该使用 HTML 表格？。
i want to design my page such that, Left side (i.e around 30%) divide into 3 parts with some margin (i.e one Column and 3 rows) and rest of the page in 2 rows (i.e one Column and 2 rows).
我想设计我的页面，左侧（即大约 30%）分为 3 个部分，有一些边距（即一列和 3 行），页面的其余部分为 2 行（即一列和 2 行）。
Not sure if i could explained it properly. I have the image file but Stackflow does not allow me to upload because of less reputation.
不知道我是否能正确解释它。我有图像文件，但 Stackflow 不允许我上传，因为声誉较低。
回答by JohnB
You don't need to use <table>for the layout you described (and you won't need anything CSS3 or HTML5 specific).
您不需要使用<table>您描述的布局（并且您不需要任何特定于 CSS3 或 HTML5 的内容）。
There are a few options for implementing this layout. Here's a good tutorial on CSS layout:
有几个选项可以实现这种布局。这是一个关于 CSS 布局的好教程：
Here is one example of your layout:
这是您的布局的一个示例：
HTML
HTML
<div class="left-column">
<div>Left Side Row 1</div>
<div>Left Side Row 2</div>
<div>Left Side Row 3</div>
</div>
<div class="right-column">
<div>Right Side Row 1</div>
<div>Right Side Row 2</div>
</div>
CSS
CSS
.left-column, .right-column{
float:left;
}
.left-column{
width:30%;
}
.right-column{
width:60%;
}
div{
padding:10px;
border:solid 1px black;
}
Screenshot of results
结果截图
回答by Kesar Sisodiya
There is another way to make table by div/css
还有另一种制作表格的方法 div/css
- html
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
- css
- css
#container { display: table; }
#row { display: table-row; }
#left, #right, #middle { display: table-cell; }
#container { 显示：表格；}
#row { 显示：表格行；}
#left, #right, #middle { 显示：表格单元格；}
回答by Joel Eckroth
Sounds like you either want a two-column or three-column layout. Here's a few links for understanding how to create either:
听起来您想要两列或三列布局。以下是一些用于了解如何创建任一链接的链接：
2-column:http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
2 栏：http : //www.456bereasttreet.com/lab/developing_with_web_standards/csslayout/2-col/
3-column:http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/
3 列：http : //www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/
