在没有表格的情况下,如何用css做6列布局,上面一层,底部一层? (带花车?我试了没成功)
谢谢
最佳答案
这是一个带有页眉和页脚的简单三列布局:
<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
width: 33%;
border: 1px solid gray;
float: left;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>
通过 float 列,它们会彼此相邻出现。通过使用 clear: both
作为页脚,它位于列的下方。
在最近的浏览器中,您可以使用 CSS3 multi-column layout. 更简单地实现列
如果您想根据可用空间将列数从三列更改为六列,您可以尝试使用 a media query.与多列布局一样,媒体查询是一个相对较新的功能。如果你想在旧版浏览器中实现这一点,你将需要使用 JavaScript(或者非常有创意地使用 float 。)
有关跨浏览器多列布局的更详细讨论,我强烈推荐 CSS Mastery: Advanced Web Standards Solutions.这是一本很棒的书。
关于Css - 我们应该如何在没有表格的情况下使用 css 制作 3-6 列布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3166946/