0

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

由于这更像是一种布局而不是表格数据，因此我选择使用 Div's。但是，我担心Divitius。

这是我发现的方法：http: //jsfiddle.net/XFUm9/

有没有更好、更有效的方法来实现这一点，或者我做得对吗？

4

3 回答 3

1

我建议您研究面向对象的 css 设计，因为您希望在不同的场景中将结构调整为不同的大小

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

等等...

我向您保证，这种方法将大大减少您的样式，从而提高性能。

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

于 2012-08-15T10:29:54.577 回答
0

我喜欢Twitter Bootstrap - 脚手架所有的辛苦工作都是为我完成的。或者960 Grid也不错。

于 2012-08-15T10:30:23.833 回答
0

我做了这个小提琴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>
于 2012-08-15T10:53:48.013 回答