Редактировать 2: Другой способ описать, что я хочу, может быть: 3 столбца, фиксированный левый, расширяющийся центр, минимальный макс справа. Я просто не хочу, чтобы право исправлялось; Я хочу, чтобы он рухнул до минуты, когда окно сжимается. Я попытался с table с и 3-4 способами с div с и ничего не работает ...CSS 3-х столбцовый раскладывающийся по центру макет, который красиво складывается
Edit 3: Это то, что я до сих пор: http://jsfiddle.net/Rw8BZ/
- Best центрирование, плохая упаковка. Я хочу, чтобы розовый элемент сжимался/обертывался перед зеленым.
- Хорошая упаковка, хорошая ширина, плохое центрирование. Таблицы. Возможно, можно использовать с запасом.
- Хорошая упаковка, плохая ширина, плохое центрирование.
... и оттуда это ухудшается. Цвета для иллюстрации, это однородный цвет bg.
Я пытаюсь найти/создать макет 3-колонки (CSS2, к сожалению), где левая и правая компактны и центр является эластичным и центром относительно других столбцов. IOW, например, как <table> работал, если центр <td> был width=100%. Итак, я сейчас использую display: table, который почти работает.
То, что я хочу, когда ширина сжимается, - это все, чтобы сжиматься, когда центральная колонка все еще центрирована, но когда нет места, правая сторона начинает обертываться. Однако, используя width=100% в центре, чтобы получить это центрированное между столбцами, сразу же происходит сбой правого столбца. Если я не использую width=100% в центре, правый столбец расширяется, а центр больше не центрируется между другими столбцами. Ни min-width ни max-width, казалось, работать в правой колонке, чтобы подтолкнуть его делать то, что я хочу ...
Edit 1: Если изменить его использовать максимальную ширину справа, не width=100% в центре, правая сторона рушится, как я хочу, но когда расширение не поддерживает ширину - правый столбец просто растет пропорционально.
псевдо-контент:
<div id="header">
<div><img width=214px></div>
<div>Some text, 3 lines, 2-3 words each</div>
<div><ul><li><a>menu</a></li>...</ul><div><img><img><img></div></div>
</div>
Левая колонка представляет собой изображение, в центре какой-нибудь текст, а справа короткая линия ссылок над некоторыми небольшими изображениями значка. Список представляет собой горизонтальный список, например меню.
CSS-я в настоящее время является:
div#header, div#header * {
margin: 0px;
padding: 0px;
}
div#header {
display: table;
font-family: FranklinGothic,Arial,Helvetica,sans-serif;
text-transform: uppercase;
width: 100%;
}
div#header > div {
display: table-cell;
vertical-align: top;
}
div#header > div:first-child + div {
text-align: center;
width: 100%;
}
div#header > div:first-child + div + div {
text-align: right;
white-space: nowrap;
background-color: blue;
}
div#header li {
padding-left: 1em;
}
div#header li:first-child {
padding-left: 0 !important;
}