Как расположить два отделения горизонтально в другом отделении
8 ответов
Настоящее распространенное заблуждение, в котором Вы нуждаетесь clear:both отделение в нижней части, когда Вы действительно не делаете. В то время как ответ foxy корректен, Вам не нужно то несемантическое, бесполезное отделение очистки. Все, что необходимо сделать, придерживаться overflow:hidden на контейнер:
#sub-title { overflow:hidden; }
Когда Вы плаваете sub-left, и sub-right они больше не занимают места в sub-title. Необходимо добавить, что другое отделение с style = "clear: both" под ними для расширения содержания отделения или они появляются ниже его.
HTML:
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>
CSS:
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
Это должно сделать то, что Вы ищете:
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>
И можно управлять всем документом с классом обертки, или просто два столбца с подосновным классом.
Я соглашаюсь с Darko Z при применении "переполнения: скрытый" к #sub-title. Однако нужно упомянуть, что overflow:hidden метод очистки плаваний не работает с IE6, если у Вас нет указанной ширины или высоты. Или, если Вы не хотите определять ширину или высоту, можно использовать "масштабирование: 1 дюйм:
#sub-title { overflow:hidden; zoom: 1; }
Этот ответ добавляет к решениям выше для обращения к последнему предложению, которое читает:
, как я удостоверяюсь, что подуехал и подправильное пребывание в подзаголовке
проблема, которая является, поскольку содержание подлевых или подправильных расширяется, они расширятся ниже подзаголовка. Это поведение разработано в CSS, но действительно вызывает проблемы для большинства из нас. Самое легкое решение состоит в том, чтобы иметь отделение, которое разрабатывается с CSS Ясное объявление.
, Чтобы сделать это включает оператор CSS для определения заключительного отделения (может быть Ясен Левый или правый, а не оба, в зависимости от того, какие объявления Плавающие использовались:
#sub_close {clear:both;}
И HTML становится:
<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>
Извините, просто понял, что это было отправлено ранее, не должен был делать ту чашку кофе при вводе моего ответа!
@Darko Z: Вы правы, лучшее описание для overflow:auto (или overflow:hidden), решение, которое я нашел, было в сообщение на SitePoint только что Простая Очистка Плаваний и существует также хорошее описание в 456bereastreet CSS статьи Часть 2 Приемов и Подсказки. Должны признаться, что были слишком ленивы для реализации этих решений самостоятельно, как заключительное отделение cludge работы хорошо, хотя это, конечно, очень неэлегантно. Так приложит усилие с этого времени для взятий за ум.
Серьезно попробуйте некоторые из них, можно выбрать зафиксированную ширину или больше жидких разметок, выбор является Вашим! Действительно легкий реализовать также.
Разметки IronMyers
- CSS Разметки
- Руководство по Настройке Разметок
- CSS на 750 пикселей Разметки
- CSS на 950 пикселей Разметки
- 100 процентов CSS Разметки
Можно также достигнуть этого использования CSS платформа Сеток, такой как Сетки YUI или Синий CSS Печати. Они решают много перекрестных проблем браузера и делают более сложные разметки столбца возможными для использования простые смертные.
Что-то вроде этого, возможно...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container
{
width:600px;
}
#head, #sub-title
{
width:100%;
}
#sub-left, #sub-right
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
#head
</div>
<div id="sub-title">
#sub-title
<div id="sub-left">
#sub-left
</div>
<div id="sub-right">
#sub-right
</div>
</div>
</div>
</body>
</html>