Question

我们应该如何制作6个列布局，其中css没有表格，上面有一层，而buttom有一层？（有漂浮物？我尝试没有成功）

由于

Answer 1

这是一个简单的三列布局，带有页眉和页脚：

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

通过浮动列，它们彼此相邻。通过使用clear: both作为页脚，它位于列的下方。

在最近的浏览器中，您可以使用CSS3 multi-column layout.

更简单地实现列

如果要根据可用空间将列数从3改为6，可以尝试使用a media query.与多列布局类似，媒体查询是一项相对较新的功能。如果你想在旧浏览器中实现这一点，你需要使用JavaScript（或者非常有创意地使用浮动。）

有关跨浏览器多列布局的更详细讨论，我强烈推荐CSS Mastery: Advanced Web Standards Solutions.这是一本很棒的书。

Answer 2

我倾向于做的是浮动除了我的一列之外，最后一列是正确的。然后我对除最后两列之外的所有列应用右边距。这是因为它们之间的沟槽是由浮动的差异创建的，但也为不同的浏览器提供了一些余地，因此布局不会中断。

至于下面的图层（我猜你的意思是一个页脚）你使用

clear: both;

例如，如果我的页面宽度为65em（我倾向于在ems中工作），并且我想要6列，我将所有列的宽度设置为10em，并且我将列1-5向左移动，我向右浮动列6 。然后我给第1-4列右边1em。

Answer 3

比使用浮动和清除浮动等更容易进入CSS布局框架，如蓝图（http://www.blueprintcss.org/）或960网格（http://960.gs/）。如果您之前从未接触过，他们通过在您的页面上创建虚拟网格系统来工作 - 要获得6列的内容，您将屏幕上（或容器上）的网格总数除以6瞧，每次完美的网格，没有重叠，没有错误。

即使你精通漂浮物，也有一些非常疯狂的怪癖，你可以完全避免已经完成脑损伤的框架。奖励指向具有CSS“重置”的框架，这实际上使所有浏览器“相同”。

Answer 4

你应该使用“ul”/

<header></header>
<ul id="columner">
 <li>
  <ul> 
    <li class="one"></li> 
    <li class="two"></li> 
    <li class="thr"></li> 
    <li class="fou"></li> 
    <li class="fiv"></li> 
    <li class="six"></li> 
  </ul>
 </li>
 <li>
  <ul> 
    <li class="one"></li> 
    <li class="two"></li> 
    <li class="thr"></li> 
    <li class="fou"></li> 
    <li class="fiv"></li> 
    <li class="six"></li> 
  </ul>
 </li>
</ul>
<footer></footer>

Answer 5

尝试在线使用一些生成器，如下所示： http://csscreator.com/version2/pagelayout.php 或者http://www.cssportal.com/layout-generator/

Answer 6

我刚用css尝试了这个6 colunm布局，它似乎运行良好 - 我基于960px宽的模板，但您可以调整数量以填充任何大小的布局：

<title>6 column layout</title>
<style type="text/css">
.wrapper {
  width: 960px;
  height: 160px;
  padding: 4px;
  border: 1px solid gray;
  float: left;
}
.column {
  width: 150px;
  height: 150px;
  padding: 4px;
  border: 1px solid gray;
  float: left;
}
.rightcolumn {
  width: 150px;
  height: 150px;
  border: 1px solid gray;
  padding: 4px;
  float: left;
}

</style>

</head>

<body>
<div class="wrapper">
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 </div>
<div class="column three">
Column 3
</div>

<div class="column four">
Column 4
</div>
<div class="column five">
Column 5</div>
<div class="rightcolumn">
Column 6
</div>
</div>

</body>
</html

我在最新的Firefox和Safari上尝试了这个，我也在IE 7浏览器上试过它，一切运行良好。我在css中添加了一个包装器，因为如果有人缩小浏览器的话，我不希望盒子互相攻击。

Css - 我们应该如何使用没有表的css制作3-6列布局？

6 个答案: