Как сделать стабильную двухколоночную разметку в HTML / CSS - PullRequest
Новая
       1

Как сделать стабильную двухколоночную разметку в HTML / CSS

48 голосов
/ 07 апреля 2011

Я хочу контейнер с двумя столбцами. Подробности:

Контейнер

  • Ширина должна соответствовать 100% его родительского элемента (это легко сделать).
  • Высота должна быть отрегулирована так, чтобы она содержала оба столбца (т. Е. Ее высота должна быть точно равна большей высоте двух столбцов, поэтому переполнения нет и полосы прокрутки никогда не отображаются)
  • должен иметь минимальный размер, равный двойной ширине левого столбца.

Колонны в целом

  • Должно быть переменной высоты, с учетом высоты их содержимого.
  • Должен располагаться рядом, чтобы их верхние края были на одной линии.
  • Не следует разбивать макет или переносить друг на друга, если к одному из них применяется хотя бы один пиксель рамки, отступа или поля, потому что это будет крайне нестабильно и неудачно.

левая колонка специально

  • Должен иметь фиксированную абсолютную ширину в пиксельных единицах.

Правильный столбец специально

  • Ширина должна заполнять оставшееся пространство в контейнере. Другими словами ...
  • Ширина должна равняться ширине контейнера минус ширина левого столбца, так что, если я помещу элемент блока DIV в этот столбец, установите его ширину равной 100%, присвойте ему высоту примерно в 10 пикселей и дайте ему цвет фона, я увижу цветную полосу размером 10px, которая идет от правого края левого столбца к правому краю контейнера (т. е. заполняет ширину правого столбца).

Требуемая стабильность

Контейнер должен иметь возможность изменять размер (путем изменения размера окна браузера) до его минимальной ширины (указанной ранее) или до гораздо большей ширины без нарушения макета. «Разрыв» будет включать изменение размера левого столбца вообще (помните, что он должен иметь фиксированную ширину в пикселях), правый столбец оборачивается под левым, появляются полосы прокрутки, блочные элементы в правом столбце не могут занимать всю ширину столбца и вообще ни одна из вышеупомянутых спецификаций не остается верной.

Справочная информация

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

Кажется, для этого есть простое решение на основе таблиц, но при любых обстоятельствах оно терпит неудачу. Например, в Safari мой левый столбец фиксированной ширины будет уменьшаться, если контейнер становится слишком маленьким, вместо того, чтобы поддерживать указанную мной ширину. Также представляется, что CSS-ширина при применении к элементу TD относится к минимальной ширине, так что если внутри нее будет что-то большее, она будет расширяться. Я пытался использовать макет таблицы: исправлено; не помогает Я также видел случай, когда элемент TD, представляющий правый столбец, не будет расширяться, чтобы заполнить оставшуюся область, или он будет выглядеть (например, третий столбец шириной 1 пиксель будет перемещен полностью вправо), но размещение границы вокруг правого столбца покажет, что его ширина равна только встроенному содержимому, а элементы уровня блока с шириной, равной 100%, не заполняют ширину столбца, а скорее соответствуют ширине встроенного содержимого. (т.е. ширина ТД, кажется, полностью зависит от содержимого).

Одно потенциальное решение Я видел слишком сложное; Меня не волнует IE6, пока он работает в IE8, Firefox 4 и Safari 5.

Ответы [ 3 ]

77 голосов
/ 07 апреля 2011

Вот, пожалуйста: 

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

Смотрите это в действии здесь: http://jsfiddle.net/FVLMX/

19 голосов
/ 07 апреля 2011

Меня не волнует IE6, пока как это работает в IE8, Firefox 4 и Safari 5

Это делает меня счастливым.

Попробуйте это: Демонстрационная версия

display: table на удивление хорошо. Как только вы не заботитесь о IE7, вы можете использовать его. На самом деле у него нет никаких обычных минусов <table>.

CSS: 

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}
0 голосов
/ 07 апреля 2011

кусок торта.

Использование 960Grids Перейдите к автоматическому компоновщику макетов и создайте двухколонный, жидкий дизайн. Постройте левый столбец с шириной сетки, которая работает ... это единственная задача, использующая сетки, и это очень легко, когда вы прочитаете учебник. В двух словах, каждый столбец в сетке имеет определенную ширину, и вы задаете количество столбцов, которое хотите использовать. Чтобы получить столбец с точно определенной шириной, вы должны отрегулировать математику так, чтобы ширина столбца была точной. Не слишком сложно.

Нет шансов обернуться, потому что другие уже сражались за тебя. Совместимость обратно настолько, насколько вам, вероятно, когда-либо потребуется. Быстро и просто .... Теперь загрузите, настройте и разверните.

Вуаля. Сетки FTW.

...