Css - 我们应该如何在没有表格的情况下使用 css 制作 3-6 列布局?

标签 css css-float

在没有表格的情况下,如何用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/

相关文章:

javascript - 如何更改 Bootstrap 3 导航栏中事件选项卡的背景颜色?

html - 具有不同渐变颜色的可重用 SVG

javascript - 如何在 CSS 中嵌入 Javascript?

css - Safari 忽略文本 :decoration:underline;

html - float 在两个元素上

Javascript keydown 函数不能同时注册两个键

html - CSS:在容器内按奇数/偶数顺序 float 图像

html - 如何将 Material Design Lite 卡片对齐到右侧

css - 许多内联 block li 标签未对齐

css - 将样式化的 div 并排放置