どのようにこのCSSを作成するには？

Question

どのようにこのCSSを作成するには？

私はDivsに従わなければならない：

   <div id="cont">
      <div class="row">
        <div class="col">1</div>
        <div class="col">example.com</div>
        <div class="col">text1</div>                   
        <div class="col">text1</div>
      </div>  
      <div class="row">
        <div class="col">2</div>
        <div class="col">example2.com</div>
        <div class="col">text2</div>                   
        <div class="col">text2</div>
      </div>  
    </div>

私はこの "テーブル"のCSSを書く方法を理解したいと思います。

私は class = "col" は浮動小数点を必要とすると思います：左（それぞれのdivは水平で連続しなければならない）ですが、

class = "row" を記述しますか？

EDIT: I don't want a table, I wrote "table" because I need the same think of:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

私はdivを使うだけでそれをする必要があります。

1

追加された 28 10月 2011 〜で 08:54 著者 Dail 編集された 28 10月 2011 〜で 08:59

ビュー: 7

源

表形式のデータの場合は、表を使用してください。

追加された 28 10月 2011 〜で 08:55, 著者 Kyle, 源

5 答え

私はあなたのCSSがあるべきだと思う：

.row{
    display:block;
}

.col{
    display:inline-block;
    width:200px;/*for example*/
}

1

追加された 28 10月 2011 〜で 08:58 著者 Evgeniy

源

著者 Curt · Answer 1 · 2011-10-28T08:56Z

Just use a table

人々はあなたがテーブルを使用すべきではないと言ったとき、彼らはレイアウトの構造を指しています。この場合でもそれを使用するのは依然として問題ありませんが、悪ではありません！

著者 Rob W · Answer 2 · 2011-10-28T08:57Z

Use the CSS as shown below. These make your DIVs look like a table ( http://jsfiddle.net/H7NQV/). Your example looks like tabular data, so I recommend using a table though.
The <table> tag supports features which are not (yet) implemented in CSS, such as colspan and rowspan.

.cont {
    display: table;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
}

著者 Andrius · Answer 3 · 2011-10-28T09:03Z

CSSテーブルとHTMLテーブルに関するこの記事を読んでみてください。これはどのようにあなたの質問に答える必要があります。また、あなたのケースでは単純なテーブルの代わりにcssテーブルを使用することから本当の価値を得るかどうかを検討するでしょう。

著者 dwalldorf · Answer 4 · 2011-10-28T08:58Z

あなたのクラス row はどうレンダリングされるのですか？私はそれがまったく構成していないと正しく見えるはずだと思います。とにかく、表形式のデータには表を使うべきです。