#css #html
#css #HTML
Вопрос:
Я пытаюсь сделать что-то похожее на следующее (здесь не касается цвета. меня здесь беспокоит форма); 
Я попробовал что-то со следующим кодом, но безуспешно!
<html>
<head>
<style type="text/css">
#header{border:3px solid gray;padding:10px;}
#header-left-container{border:1px solid gray;float:left;width:30%;}
#header-right-container{border:1px solid gray;float:right;width:69%;}
</style>
</head>
<body>
<div id="header">
<div id="header-left-container">
pooo
</div>
<div id="header-right-container">
bla bla bla.....
</div>
</div>
</body>
</html>
Я знаю, что это можно легко сделать с помощью table, но я не хочу использовать table в своем приложении, где я могу сделать то же самое с элементами div.
есть предложения?
Ответ №1:
Что вам нужно сделать, так это очистить область вокруг двух размещенных разделов. Выполнение этого с помощью современного technuiqe дает родительскому свойству Overflow: Hidden или Auto (что вам больше подходит. Я рекомендую скрытый)
В прошлом пользователь people clearfix (google об этом). Сегодня мы используем этот подход.
Также люди обычно ставили clear: оба после создания двух элементов. У этого есть отрицательная сторона — на 1 элемент больше в dom.
Комментарии:
1. Я добавил обновленную версию — jsfiddle.net/j4DnG/7 с немного большим стилем и улучшением написания css-селекторов 🙂
2. jsfiddle.net/j4DnG/8 и еще один. Теперь с небольшим сбросом css в качестве наилучшего практического подхода 🙂
Ответ №2:
Вам нужно добавить overflow:auto; в #header css; без этого разделы не расширяются, чтобы содержать плавающие элементы.
Ответ №3:
ваш код выглядит нормально…
предложения:
Просто добавьте clearfix после плавающих divs, чтобы они содержались внутри родительского объекта, например:
<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>
Ответ №4:
Добавить
<br style="clear:both" />
после второго div. Или сделайте контейнер div плавающим: слева. Или используйте один из фреймворков css, если вы не хотите становиться мастером css перед созданием веб-страницы. Один из них http://960.gs
Комментарии:
1. Спасибо. это действительно сработало. но когда я сделал то, что сказал @Steve, это также сработало (добавив overflow: auto; в мой #header div). в чем разница?
Ответ №5:
Используете ли вы firebug? продолжайте twitter.com и посмотрите, как они определили левый и правый контейнеры — это таблица стилей . Они не используют table для его реализации. просто div
Ответ №6:
Просто замените float: right; объявление на margin-left: 30%; объявление для #header-right-container . Вам не нужно размещать их оба. Таким образом, вам нужно будет очистить значения с плавающей точкой только в том случае, если левый блок выше правого блока. Посмотрите на эту скрипку.