При создании плавающих столбцов в CSS есть несколько вещей, которые нужно изучить.
Первый, контейнер (в вашем случае .wrap) также должны быть очищены для поплавков. Вот хороший вопрос Stackoverflow на «clearfix». «Clearfix-ing» гарантирует, что высота контейнера будет растянута, чтобы соответствовать самому длинному плавающему столбцу. Полезно для создания «искусственных колонок».
What methods of ‘clearfix’ can I use?
Второй, это нужно знать, сколько столбцов вы хотите сделать? 2 столбца? 3 столбца?
Существуют различные способы кожи, которые кошка. Вы можете сделать 2 столбца, а затем разделите один из этих столбцов на два столбца. Или вы можете разместить 3 контейнера блоков и поплавать каждый из них в процентах от общей ширины. То есть. для 3-х столбчатых макетов вы теоретически хотели бы, чтобы каждый из них был 33,33% в ширину (в зависимости от того, как вы хотите делать водостоки или поля).
Третий, вы говорите о «гибкой планировке». Ну, гибкий макет не может работать с шириной пикселя, поскольку пиксели являются статическими значениями. То есть. Если вы говорите, что ширина 200px, это всегда 200px, независимо от того, насколько большой или маленький ваш контейнер или окно.
Что вам нужно сделать, это использовать проценты. Конечно, чтобы сделать правильный гибкий макет, вы хотите иметь базовый размер. Таким образом, вам нужно иметь фиксированный дизайн, который вы скажете, это ваш «оптимальный дизайн» (я должен использовать этот термин свободно, так как истинный гибкий и отзывчивый дизайн должен хорошо выглядеть по большей части).
Итак, предположим, что ваш дизайн имеет основную область содержимого .wrap be 1000px. Вы хотите иметь расположение в 2 столбцах, используя золотой коэффициент. http://en.wikipedia.org/wiki/Golden_ratio
В принципе, вы хотите, чтобы один столбец был 618px, а другой - 1000px - 618px = 382px.
Для CSS вы хотите установить их в процентах.Чтобы получить процент, вы берете ширину родителя и разделите его на нужную вам ширину.
618px/1000px = 0,618 * 100 (для процентов) = 61,8%
382px/1000px = 0,382 * 100 (для процентов) = 38,2%
.left {
float: left;
width: 61.8%
}
.right {
float: right;
width: 38.2%
}
Джозеф Зильбера является правильным, вы не должны нуждаться в, чтобы плавать в правом столбце, но это не может вызвать другие неожиданные проблемы того, как модель окна действует и обертывается вокруг поплывшего левого элемента, особенно если она короче другой.
Вы можете применить маржу для смещения одной колонки к другой ширине столбцов, но я считаю, что это просто беспорядочно, и все еще могут быть проблемы с плохими реализациями CSS в браузерах (насколько я могу сказать, что я не поддерживаю IE6 больше, он по-прежнему используется нашими посетителями, чтобы поддерживать его).
Также обратите внимание, что при обработке% вы сталкиваетесь с ошибками округления. Некоторые браузеры будут округлены вниз или вверх, когда они ударят «.5%». Это может привести к тому, что ваши плавающие столбцы будут обертываться, потому что он становится на 1px больше, чем элемент контейнера. Таким образом, чтобы быть в безопасности, вам захочется немного побрить ширину, чтобы дать вам 1-2px-буфер для упаковки.
Общим подходом является предоставление «пустого» желоба или поля между левым и правым столбцом, например, 10px. И 10px в нашем дизайне:
10px/1000px = 0,01 * 100 (для процентного) = 1%
Теперь вы можете взять 0,5% от каждой колонки или взять полный 1% от одной колонки. Я просто сделаю это позже.
.left {
float: left;
width: 60.8% /* removed 1% to give a gutter between columns */
}
.right {
float: right;
width: 38.2%
}
Это дает вам хорошую зону безопасности, и вы избегаете ошибок округления.
Кроме того, теперь, когда мы работаем в%, макет будет жидким. Ваши 2 столбца будут изменять размер вашего браузера, пока вы не достигнете значения min/max.
Кроме того, не забудьте «clearfix»
<div class="wrap clearfix">
<div class="left">
<!-- content -->
</div>
<div class="right">
<!-- content -->
</div>
</div>
Есть, конечно, много других соображений, чтобы принимать во внимание при рассмотрении жидкости/гибких решеток.
Единственное, что вы можете сделать, это не воссоздать колесо, а использовать CSS-фреймворк, например, Yahoo! или Blueprint. Я считаю, что у них есть эти встроенные модули и они были тщательно протестированы.
Кроме того, я рекомендую прочитать отзывчивый веб-дизайн. На нем есть статья A List Apart: http://www.alistapart.com/articles/responsive-web-design/, а также книга, написанная Этаном Маркоттом (другая статья и опубликованная на сайте ALA), которая является отличным чтением.
Единственный реальный недостаток в книге заключается в том, что он не покрывает недостатки отзывчивого дизайна, и, несмотря на «классный» фактор, многие крупные веб-дизайнеры и разработчики решили по-прежнему использовать отдельный мобильный/дизайн рабочего стола на рабочем столе.
Что является незначительным не по теме, поскольку исходный вопрос касался только жидкого дизайна, а не размера целевого носителя.
Надеюсь, что это поможет!
Приветствия!
Ему нужен столбец с фиксированной шириной, ваш ответ не позволяет этого. – Michael