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屋!