Question

我正在创建一个论坛样式页面，每个主题都有一行，每行有四列。

由于这更像是布局而不是制表数据，所以我选择使用Div来实现。但是，我担心Divitius。

是否有更好，更有效的方法来实现这一目标或者我是否正确完成了这项工作？

Answer 1

我建议您研究一种面向对象的CSS设计，因为您需要在不同的场景中将结构拟合到不同的大小

.left { float:left; }
.right { float: right }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

依旧......

我向你保证，这种方法会大大减少你的造型，从而提高性能。

参见：https://github.com/stubbornella/oocss/wiki/（面向对象的CSS）

Answer 2

我喜欢Twitter Bootstrap - Scaffolding所有艰苦的工作都为我完成。或者960 Grid也很好。

Answer 3

我做了这个小提琴http://jsfiddle.net/thiswolf/zVapK/

这是页面

<!Doctype html>
<head>
<title>
Divs
</title>
<style type="text/css">
.right-rows{
float:right;
}
.green{float:left; margin-left:20px; background-color:green;}
.blue{float:left; margin-left:20px; background-color:blue;}
.purple{float:left; margin-left:20px; background-color:purple;}
.orange{float:left; margin-left:20px; background-color:orange;}
.grey{float:left; margin-bottom:20px; background-color:grey;}
.main{}
.row{width:900px;height:auto;}
.to-the-left{float:left;}
</style>
</head>
<body>
<div class="main">
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
</div>
</body>
</html>

CSS - 创建DIV网格的正确方法

3 个答案: