CSS：没有< table>的垂直列布局 [英] CSS: Vertical column layout without <table>
问题描述
好的，我倾向于html&我习惯做这样的事情（要创建一个具有垂直列布局的网站）：
< html>
< head>
< title>垂直列布局< / title>
< / head>
< body>
< table id =doc>
<！ - header - >
< tr>
< td id =headercolspan =3><！ - header code / php include - >< / td>
< / tr>
<！ - / header - >
<！ - / content - >
< tr>
< td id =col1name =menu><！ - content code / php include - >< / td>
< td id =col2name =content_left><！ - content code / php include - >< / td>
< td id =col3name =content_right><！ - content code / php include - >< / td>
< / tr>
<！ - / content - >
<！ - footer - >
< tr>
< td id =footercolspan =3><！ - header code / php include - >< / td>
< / tr>
<！ - / footer - >
< / table>
< / body>
< / html>
很容易，一切都按照我想要的方式自动对齐，没有css头痛等。 。然而，不久以前，我读到这种方法不应再使用。我将尝试一种新的方式使用一束div，但w3c& w3c的验证不喜欢你使用块元素作为内联元素... WTF !!!
所以...我的失望让我问你们：
如何？如何以现代方式完成这样的事情...尽可能简单？ html 5有更好的方法吗？
为什么？为什么现在不应该使用这个表格方法在网站上得到一个垂直列布局 / p>
下面是一个基本网格，我拼凑在一起，你可以使用任何大小的网站。您需要清除列上的浮动，使用overflow隐藏或clearfix。如果您的项目不需要支持IE7，您可以使用框大小边框框为列添加填充，否则在每个列中添加一个额外的元素填充。
HTML：
$ b$ b
<！DOCTYPE HTML>
< html lang =en-US>
< head>
< meta charset =UTF-8>
< title>< / title>
< / head>
< body>
< header>< / header>
< div class =content grid>
< div id =col1class =col s1of3>< / div>
< div id =col2class =col s1of3>< / div>
< div id =col3class =col s1of3>< / div>
< / div>
< footer>< / footer>
< / body>
< / html>
CSS：
code> .grid {
}
.grid .col {float：left; }
.grid .col.s1of1 {width：100％; }
.grid .col.s1of2 {width：50％; }
.grid .col.s1of3 {width：33.33333333％; }
.grid .col.s2of3 {width：66.66666666％; }
.grid .col.s1of4 {width：25％; }
.grid .col.s3of4 {width：75％; }
.grid .col.s1of5 {width：20％; }
.grid .col.s2of5 {width：40％; }
.grid .col.s3of5 {width：60％; }
.grid .col.s4of5 {width：80％; }
Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):
<html>
<head>
<title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
<tr>
<td id="header" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / header -->
<!-- / content -->
<tr>
<td id="col1" name="menu"><!-- content code/php include --></td>
<td id="col2" name="content_left"><!-- content code/php include --></td>
<td id="col3" name="content_right"><!-- content code/php include --></td>
</tr>
<!-- / content -->
<!-- footer -->
<tr>
<td id="footer" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / footer -->
</table>
</body>
</html>
Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c & w3c's validation does not like you using block elements as inline elements...WTF!!!
So...my frustration lead me to ask you guys:
HOW? How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a "vertical column layout" on a website?
Below is a basic grid I cobbled together you can use with any size website. You'll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn't need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.
Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<div class="content grid">
<div id="col1" class="col s1of3"></div>
<div id="col2" class="col s1of3"></div>
<div id="col3" class="col s1of3"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
.grid {
}
.grid .col { float: left; }
.grid .col.s1of1 { width: 100%; }
.grid .col.s1of2 { width: 50%; }
.grid .col.s1of3 { width: 33.33333333%; }
.grid .col.s2of3 { width: 66.66666666%; }
.grid .col.s1of4 { width: 25%; }
.grid .col.s3of4 { width: 75%; }
.grid .col.s1of5 { width: 20%; }
.grid .col.s2of5 { width: 40%; }
.grid .col.s3of5 { width: 60%; }
.grid .col.s4of5 { width: 80%; }
这篇关于CSS：没有< table>的垂直列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
