css - CSS でテーブルを作成する

Question

私は成功せずに、CSS を使用して特定の単純なレイアウトを開発しようとしています。私はこのようなことを達成したいと思います:

BookImage        BookImage        BookImage
BookTitle        BookTitle        BookTitle

私がこれを持っていることを知るまで：

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }

問題は、欲しいものが手に入らないことです。各タグ (<img>または<p></p>) が「列」と見なされているかのようです。と をグループ<img>化し<p>、それらをまとめてレイアウトを取得する方法が欲しいです。できると思っ<div>ていたのですが、それは間違いでした。

Answer 1

そのような結果を探しているときは、単にs とs を使用<table>してください。CSS で背景や枠線などのスタイルを設定できます。<tr><td>

Answer 2

<table>本当にテーブルを作成しているのであれば、すべてのタグを利用してみませんか。以前このサイトで誰かが私に言った一般的な経験則は、データが実際には表形式であるがレイアウト用ではない場合、テーブルを使用しても問題ないということでした。データが表形式である場合、そうであるように見えますが、なぜ車輪を再発明するのでしょうか。

Answer 3

div が列から別の列にスプレーされるのを避けるには、それらを inline-boxe/content として設定します。

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }
.threeColumns > div {
    display:inline-block;
    }

Answer 4

display:tableコンテナ div とdisplay:table-cell子 div にも必要です。