Как сделать стабильную двухколоночную разметку в HTML/CSS
Я хочу контейнер с двумя столбцами. Подробности:
Контейнер
- Ширина должна соответствовать 100% его родительского элемента (это легко сделать).
- Высота должна быть отрегулирована так, чтобы она содержала оба столбца (т. Е. Ее высота должна быть точно равна большей высоте двух столбцов, поэтому переполнения нет, и полосы прокрутки никогда не отображаются)
- Должен иметь минимальный размер, равный двойной ширине левого столбца.
Колонны в целом
- Должны иметь переменную высоту, приспосабливаясь к высоте их содержимого.
- Должны быть рядом, чтобы их верхние края были на одной линии.
- Не следует разбивать макет или переносить друг на друга, если к одному из них применяется хотя бы один пиксель рамки, отступа или поля, потому что это будет крайне нестабильным и неудачным.
Левый столбец специально
- Должен иметь фиксированную абсолютную ширину в пиксельных единицах.
Правильный столбец специально
- Ширина должна заполнять оставшееся пространство в контейнере. Другими словами...
- Ширина должна равняться ширине контейнера за вычетом ширины левого столбца, так что, если я помещу элемент блока DIV в этот столбец, установите его ширину равной 100%, присвойте ему высоту примерно 10 пикселей и задайте цвет фона, Я увижу цветную полосу высотой 10px, которая идет от правого края левого столбца к правому краю контейнера (то есть заполняет ширину правого столбца).
Требуемая стабильность
Контейнер должен иметь возможность изменять размеры (изменяя размеры окна браузера) до его минимальной ширины (указанной ранее) или до гораздо большей ширины, не нарушая компоновку. "Разрыв" будет включать изменение размера левого столбца вообще (помните, что он должен иметь фиксированную ширину в пикселях), правый столбец оборачивается под левым, появляются полосы прокрутки, блочные элементы в правом столбце не могут занимать всю ширину столбца и вообще ни одна из вышеупомянутых спецификаций не остается верной.
Фон
Если используются плавающие элементы, не должно быть шансов, что правый столбец будет перенесен под левый, что контейнер не сможет содержать оба столбца (путем отсечения любой части столбца или разрешения любой части столбцов переполнить его границу) или появятся полосы прокрутки (поэтому я бы устал от использования чего-либо, кроме переполнения: скрытого, чтобы вызвать сдерживание плавающего элемента). Применение границ к столбцам не должно нарушать макет. Содержимое столбцов, особенно правого столбца, не должно нарушать макет.
Кажется, есть простое решение на основе таблиц, но при любых обстоятельствах оно терпит неудачу. Например, в Safari мой левый столбец фиксированной ширины будет уменьшаться, если контейнер становится слишком маленьким, вместо того, чтобы поддерживать указанную мной ширину. Также представляется, что CSS-ширина при применении к элементу TD относится к минимальной ширине, так что если внутри нее будет что-то большее, она будет расширяться. Я пытался использовать макет таблицы: исправлено; не помогает Я также видел случай, когда элемент TD, представляющий правый столбец, не будет расширяться, чтобы заполнить оставшуюся область, или он будет выглядеть (например, третий столбец шириной 1 пиксель будет перемещен полностью вправо), но размещение границы вокруг правого столбца покажет, что его ширина равна только встроенному содержимому, а элементы уровня блока с шириной, равной 100%, не заполняют ширину столбца, а скорее соответствуют ширине встроенного содержимого. (т.е. ширина ТД, кажется, полностью зависит от содержимого).
Одно потенциальное решение, которое я видел, слишком сложно; Меня не волнует IE6, пока он работает в IE8, Firefox 4 и Safari 5.
6 ответов
Ну вот:
<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/
Меня не волнует IE6, если он работает в IE8, Firefox 4 и Safari 5
Это радует.
Попробуйте это: Live Demo
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
}
Как предложил mtmurdock, можно удалить правило .clear и переместить его в псевдоэлемент #container::after.
Более 11 лет спустя. Примените display:grid к контейнеру и разделите доступное пространство на grid-template-columns: 100px 1fr. Где 1fr представляет долю 100% оставшегося пространства.
Другая идея заключается в том, чтобы включитьleft divвright div, что, в свою очередь, совпадает сline container:
[right][left] ... [/left] ..... [/right]
Кусок пирога.
Используйте 960Grids. Перейдите к автоматическому компоновщику макетов и создайте двухколонный жидкостный дизайн. Постройте левый столбец по ширине сетки, которая работает... это единственная задача, использующая сетки, и это очень легко, когда вы прочитаете учебник. В двух словах, каждый столбец в сетке имеет определенную ширину, и вы задаете количество столбцов, которое хотите использовать. Чтобы получить столбец с точно определенной шириной, вы должны отрегулировать математику так, чтобы ширина столбца была точной. Не слишком сложно.
Нет шансов обернуться, потому что другие уже сражались за тебя. Совместимость обратно настолько, насколько вам, вероятно, когда-либо понадобится. Быстро и просто.... Теперь загрузите, настройте и разверните.
Вуаля. Сетки FTW.