だから私はcss3仕様について知り、すぐにそれを使って動的に生成されたテーブルを使用するフォーラムリストcolumnsを「近代化」できることに気づきました。
テーブルを生成するコードは、次のデータベース行のデータをテーブルの新しい行に配置するか、新しい列に配置するかを決定するため、非常に複雑です。css3列の方法を使用すると、コードにデータをページに読み取らせ、css3をそのままにして、どの列に何を入れるかを決定できると思います。
しかし、私は少し問題に遭遇しました。これを使用する場合、コンテンツは指定された数の列に分割されません。
参照用のコードは次のとおりです。
.2col {
column-count: 2;
column-width: 400px;
column-gap: 10px;
column-rule: 1px solid #e1e1e1;
}
<div class="cats 2col">
<div class="title">
<div class="t">
<h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
</div>
<section>
<div class="cat">
<p>Category 1<span>This is the first category</p>
</div>
<div class="cat">
<p>Category 2<span>This is the second category</p>
</div>
<div class="cat">
<p>Category 3<span>This is the third category</p>
</div>
</section>
</div>
<div class="title">
<div class="t">
<h2><a href="#" class="sh" id="t1">-</a> Title 2</h2>
</div>
<section>
<div class="cat">
<p>Category 1<span>This is the first category</p>
</div>
<div class="cat">
<p>Category 2<span>This is the second category</p>
</div>
</section>
</div>
</div>
テスト用にこのJSFiddleを設定しました：http：//jsfiddle.net/LYoung/JLVEs/1/
明らかに私は何か間違ったことをしている。誰かが私がそれが何であるか、そしてなぜそれが間違っているのかを特定するのを手伝ってもらえますか？