Как создать два столбца на веб-странице?

Я хочу, чтобы на моей веб-странице было два столбца. Для меня простой способ сделать это - использовать таблицу:

<table>
   <tr>
      <td>
         Content of the first column.
      </td>
      <td>
         Content of the second column.
      </td>
   </tr>
</table>

Мне нравится это решение, потому что, прежде всего, он работает (он дает именно то, что я хочу), он также очень прост и стабилен (у меня всегда будет два столбца, независимо от того, насколько велико мое окно). Легко контролировать размер и положение таблицы.

Однако я знаю, что людям не нравится табличный макет, и, насколько я знаю, они используют div и css. Поэтому я хотел бы также попробовать этот подход. Может ли кто-нибудь помочь мне в этом?

Я хотел бы иметь простое решение (без трюков), которое легко запомнить. Он также должен быть стабильным (чтобы случайно не случилось, что один столбец находится под другим или перекрывается или что-то в этом роде).

Ответы

Ответ 1

Я рекомендую посмотреть эту статью

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

см. 4. Поместите столбцы бок о бок специальные

Чтобы обе колонки (#main и #sidebar) отображались бок о бок, мы плаваем их, один влево, а другой вправо. Мы также указываем ширину столбцов.

    #main {
    float:left;
    width:500px;
    background:#9c9;
    }
    #sidebar {
    float:right;
    width:250px;
   background:#c9c;
   }

Обратите внимание, что сумма ширины должна быть равна ширине, указанной на шаге 3 на #wrap.

Ответ 2

Я согласен с @haha на этом, по большей части. Но есть несколько проблем, связанных с перекрестным браузером, с использованием "float: right" и, в конечном итоге, может дать вам больше головной боли, чем вы хотите. Если вы знаете, какими будут ширины для каждого столбца, используйте float: слева на обоих и избавите себя от проблемы. Еще одна вещь, которую вы можете включить в свою методологию, - это построить классы столбцов в вашем CSS.

Итак, попробуйте что-то вроде этого:

CSS

.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}

HTML

<div class="col-wrapper">
    <div class="col col-670">[Page Content]</div>
    <div class="col col-250">[Page Sidebar]</div>
</div>

Ответ 3

В принципе вам нужно 3 divs. Сначала как wrapper, второй как left и третий как right.

.wrapper {
 width:500px;
 overflow:hidden;
}

.left {
 width:250px;
 float:left;
}

.right {
 width:250px;
 float:right;
}

Пример того, как сделать 2 столбца http://jsfiddle.net/huhu/HDGvN/

CSS Cheat Sheet для справки

Ответ 4

Я нашел настоящую классную сетку, которую я также использую для столбцов. Проверьте Простую сетку. С помощью этого CSS вы можете просто использовать:

<div class="grid">
    <div class="col-1-2">
       <div class="content">
           <p>...insert content left side...</p>
       </div>
    </div>
    <div class="col-1-2">
       <div class="content">
           <p>...insert content right side...</p>
       </div>
    </div>
</div>

Я использую его для всех моих проектов.

Ответ 5

Простым и лучшим решением является использование таблиц для макетов. Ты делаешь это правильно. Существует несколько таблиц причин.

  • Они работают лучше, чем CSS
  • Они работают во всех браузерах без суеты.
  • Вы можете легко отлаживать их с помощью атрибута border = 1