0

各トピックの行があり、各行に4つの列があるフォーラムスタイルのページを作成しています。

これは表形式のデータというよりはレイアウトに近いので、これにはDivを使用することにしました。しかし、私は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

私はTwitterBootstrapが好きです-すべてのハードワークを足場にすることは私のために行われます。あるいは、 960グリッドも良いです。

于 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 に答える