Разработка макета страницы с использованием CSS / Div, как таблица HTML

Question

Поскольку я новичок в CSS, я не уверен, возможна ли следующая компоновка страницы с использованием Div / CSS или я должен использовать таблицу HTML ?.

Я хочу создать свою страницу таким образом, чтобы левая сторона (т.е. около 30%) была разделена на 3 части с некоторым запасом (т. Е. Один столбец и 3 строки), а остальная часть страницы - на 2 строки (т. Е. Один столбец).и 2 строки).

Не уверен, смогу ли я объяснить это правильно.У меня есть файл изображения, но Stackflow не позволяет загружать его из-за меньшей репутации.

Answer 1

Вам не нужно использовать <table> для макета, который вы описали (и вам ничего не нужно для CSS3 или HTML5) .

Существует несколько вариантовреализуя этот макет.Вот хороший учебник по макету CSS:

• Макеты CSS

Вот один пример вашего макета:

• jsFiddle

HTML

<div class="left-column">
  <div>Left Side Row 1</div>
  <div>Left Side Row 2</div>
  <div>Left Side Row 3</div>
</div>
<div class="right-column">
  <div>Right Side Row 1</div>
  <div>Right Side Row 2</div>
</div>

CSS

.left-column, .right-column{
  float:left;
}
.left-column{
  width:30%; 
}
.right-column{
  width:60%; 
}
div{
  padding:10px;
  border:solid 1px black;
}

Снимок экрана результатов

Answer 2

Есть еще один способ сделать таблицу на div/css

- html

    <div id="container">
      <div id="row">

        <div id="left">
            <h4>Left Col</h4>
            <p>...</p>
        </div>

        <div id="middle">
            <h4>Middle Col</h4>
            <p>...</p>
        </div>

        <div id="right">
            <h4>Right Col</h4>
            <p>...</p>
        </div>

        </div>
    </div>

• CSS

# контейнер { дисплей: стол; } * +1010 *

# row { дисплей: таблица-строка; }

# слева, # направо, # середина { дисплей: таблица-ячейка; }

Answer 3

Звучит так, будто вы хотите макет с двумя или тремя столбцами. Вот несколько ссылок для понимания того, как создать:

2 колонки: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

3 колонки: http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/