<div class="row"> <div class="col">1</div> <div class="col">example.com</div> <div class="col">text1</div> "> <div class="row"> <div class="col">1</div> <div class="col">example.com</div> <div class="col">text1</div> "> <div class="row"> <div class="col">1</div> <div class="col">example.com</div> <div class="col">text1</div> " />

どのようにこの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
表形式のデータの場合は、表を使用してください。
追加された 著者 Kyle,

5 答え

Just use a table

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

2
追加された
divを使用する必要があります。元のメッセージの編集内容をお読みください
追加された 著者 Dail,
@Dail - なぜですか?このマークアップは表形式のデータを格納するために使用されませんか?
追加された 著者 Curt,

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;
}
2
追加された
divを使用する必要があります。元のメッセージの編集内容をお読みください
追加された 著者 Dail,
@Dail私の答えはあなたのHTMLコードを変更していません。 DIVを使用してアイデアを実装するためのCSSを追加しました。また、テーブルに切り替えるヒントを提供しました。 DIV専用のテーブル: jsfiddle.net/H7NQV
追加された 著者 Rob W,

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

.row{
    display:block;
}

.col{
    display:inline-block;
    width:200px;/*for example*/
}
1
追加された

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

0
追加された

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

0
追加された
divを使用する必要があります。元のメッセージの編集内容をお読みください
追加された 著者 Dail,
divを使用するために必要なのはなぜですか?
追加された 著者 Kyle,