як створити цей css?

Я повинен прослідкувати двійки:

   <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" потрібно плавати: ліворуч (тому що кожен розділ повинен бути послідовним, горизонтально), але як

написати 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>

але мені потрібно це зробити лише за допомогою divs.

1
Якщо це табличні дані, скористайтеся таблицею!
додано Автор Kyle, джерело

5 Відповіді

Just use a table

Коли люди кажуть, що ви не повинні використовувати таблиці, вони стосуються структури макета. До цих пір добре використовувати його в цьому випадку, вони не є злом!

2
додано
Мені потрібно використовувати divs, будь ласка, прочитайте редагування у вихідному повідомленні
додано Автор 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
додано
Мені потрібно використовувати divs, будь ласка, прочитайте редагування у вихідному повідомленні
додано Автор Dail, джерело
@Dail Мій відповідь не змінює ваш код HTML. Я додав CSS для реалізації вашої ідеї за допомогою DIV, пропонуючи пораду для перемикання на таблиці. Тільки таблиця DIV: jsfiddle.net/H7NQV
додано Автор Rob W, джерело

Я думаю, що ваш CSS повинен бути:

.row{
    display:block;
}

.col{
    display:inline-block;
    width:200px;/*for example*/
}
1
додано

Спробуйте прочитати цю публікацію про таблиці CSS і таблиці HTML . Це має відповісти на ваше запитання, як це зробити. Також це дозволить вам враховувати, чи отримуєте ви будь-яку реальну цінність за допомогою css-таблиць замість простого таблиці у вашому випадку.

0
додано

Як передбачається, що ваш клас рядка буде відображатися? Я думаю, він повинен виглядати правильно, якщо ви не налаштовуєте його взагалі. У будь-якому випадку, ви повинні використовувати таблицю для табличних даних.

0
додано
Мені потрібно використовувати divs, будь ласка, прочитайте редагування у вихідному повідомленні
додано Автор Dail, джерело
Чому вам потрібно використовувати divs?
додано Автор Kyle, джерело