Как избежать пустых четких разделов?

В последнее время я использую много поплавков, например:

<div id="buttons">
  <input type="button" id="btn1" value="Button One">
  <input type="button" id="btn2" value="Button Two">
  <input type="button" id="btn3" value="Button Three">
</div>

Иногда я перемещаю кнопку вправо. Иногда я буду перемещать их всех вправо. Вот тут и начинается проблема. Это действительно сбивает поток, если я это делаю, поэтому мне приходится продолжать вставлять это:

<div style="clear:both;"></div>

в конце. Это сбивает макет, если я не перемещаю их все.

Есть ли хорошее решение для этого?


html css css-float
person Jordie    schedule 17.05.2009    source источник

Ответы (5)


arrow_upward
12
arrow_downward

Да, используйте overflow: hidden в контейнере, т.е.:

<style type="text/css">
#buttons { overflow: hidden; }
</style>
person cletus    schedule 17.05.2009
comment
'auto' также работает - не будет иметь значения, если что-то, кроме поплавков, не переполняется. - person Anonymous; 17.05.2009
comment
В некоторых случаях это не работает в IE 7 и 6; zoom: 1; должно иметь тот же эффект. - person Paul D. Waite; 17.05.2009

arrow_upward
9
arrow_downward

Это большая часть кривой обучения CSS. Когда вы перемещаете элементы, их содержащий элемент больше не учитывает вертикальную высоту плавающих элементов. Есть несколько решений, которые вы могли бы использовать, чтобы обойти вашу дилемму.

Просто укажите высоту вашего контейнера #button в соответствии с высотой ваших кнопок:

#button { height: 30px; }

Более причудливым решением был бы взлом clearfix. Это довольно пуленепробиваемое решение, которое также поможет без необходимости добавлять дополнительную разметку и встроенный CSS.

#buttons:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#buttons {
    display: inline-block;
}

html[xmlns] #buttons {
    display: block;
}

* html #buttons {
    height: 1%;
}
person Mark Eagleton    schedule 17.05.2009
comment
Кажется, это лучшее решение для css! - person Kevin Brown; 17.05.2009

arrow_upward
1
arrow_downward

Пока вы определяете переполнение родителя, он очистит все поплавки.

Используйте overflow:auto для родителя, и все готово!

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

(Я слышал, что это работает и с использованием display:inherit, но не пробовал.)

person SamGoody    schedule 17.05.2009

arrow_upward
1
arrow_downward

Когда вы перемещаете элементы с помощью CSS, они удаляются из естественного состояния страницы.

Если они находятся в контейнере DIV, это сдвинет элемент наружу, и его родитель не увидит, куда делись дочерние элементы. Контейнер затем сожмется обратно, чтобы упаковать столько площади, как если бы элементов там вообще не было.

Чтобы покрыть это, вы должны указать overflow:hidden для свойства контейнера.

По умолчанию для него установлено значение visible, что позволит всему "выпадать". коробки, если она была спущена на воду как таковая.

Исправьте это, установив это в своем CSS:

#buttons 
{
    overflow:hidden;
}

Теперь это будет ограничивать отображение плавающих элементов в контексте и в пределах родительского элемента DIV.

person random    schedule 12.09.2009

arrow_upward
0
arrow_downward

Обычно лучшими вариантами являются метод clearfix или метод установки 'overflow: hidden' на содержащий родитель.

В вашем конкретном примере у вас есть еще один вариант: вы вообще не можете плавать ни один из входов и установить «выравнивание текста: право» на #buttons

#buttons {
    text-align: right;
    }

Хотя я немного полагаюсь на overflow: hidden, стоит отметить, что если вы пытаетесь расположить какие-либо элементы за пределами (или частично за пределами) содержащего элемента, для которого установлено значение «overflow: hidden», позиционированный элементы будут обрезаны на границе содержащего элемента. (это встречается не слишком часто, но на это стоит обратить внимание.)

Вы также можете найти сообщение в блоге "Уроки, извлеченные из взлома Clearfix CSS" Джеффа Старра интересно.

person Andy Ford    schedule 17.05.2009