Разрыв div при использовании float

У меня есть следующий HTML-код, и я бы хотел отобразить синий фон за кнопками и текстом. К сожалению, со следующим кодом синий фон исчезает. Если я удалю CSS для кнопок и текста ids, фон вернется.Разрыв div при использовании float

Что я делаю неправильно?

Спасибо!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style> 


    #actions 
    { 
     background: blue; 
    } 

    #buttons 
    { 
     float: left; 
    } 

    #text 
    { 
     float: right; 
    } 

    </style> 
</head> 
<body> 

     <div id="actions"> 
      <div id="buttons"> 
       <input type="button" id="btnOne" value="Bla bla" /> 
       <input type="button" id="btnTwo" value="Bla bla bls" /> 
      </div> 
      <div id="text">Bla bla bla</div> 
     </div> 

</body> 
</html>

источник

2009-03-12 Martin

@Oriol - Этот вопрос был открыт 12 марта 2009 года. Другой вопрос был открыт 14 января 2010 года. Вопрос, открытый 14 января 2010 года, должен быть дубликатом, а не этим. – Martin

Я закрыл этот вопрос, а не другой, потому что другой более «популярен» (гораздо больше голосов, посещений и избранных). Обратите внимание, что нет ничего плохого в том, что вопрос закрыт как дубликат. – Oriol

Вы должны «очистить» ваши поплавки. Плавающие элементы вынимают их из нормального расположения блока страницы, поэтому элемент, который плавает справа, вырывается из родительского контейнера, сворачивая div. Вы можете очистить их, или более кратким и умный способ добавить «переполнения: авто» в родительском контейнере:

#actions 
{ 
    background: blue; overflow: auto; 
} 

#buttons 
{ 
    float: left; 
    overflow: hidden; 
} 

#text 
{ 
    float: right; 
    overflow: hidden; 
}

С «переполнения: авто» может производить полосы прокрутки в некоторых случаях, я обычно явно не допустить, что указав «элементы переполнения: скрытые» на дочерние элементы. Это надежно работает в моем опыте.

источник

2009-03-12 18:42:14 guns

Ничего себе! Оно работает! Благодаря! : D – Martin

Попробуйте это:

<div id="actions"> 
     <div id="buttons"> 
      <input type="button" id="btnOne" value="Bla bla" /> 
      <input type="button" id="btnTwo" value="Bla bla bls" />     
     </div> 
     <div id="text">Bla bla bla</div> 
     <div style="clear:both;height:1px;overflow:none;"></div> 
    </div>

Основная проблема состоит в том, что плавающие элементы не способствуют расчетной высоте контейнера. Таким образом, действия div # не имеют высоты при размещении двух других div.

источник

2009-03-12 18:40:20 Joel

Не работает в IE и FF. – Martin

Извините. Если бы дивер в неправильном месте. – Joel

Более подробную информацию о поплавки и очистки их: http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/

источник

2009-03-12 19:04:55 AaronSieb

Не-плавающий элемент не будет иметь любую высоту, если она содержит только плавали элементы. Чтобы заставить внешний элемент растягиваться и окружать плавающие элементы, он также должен быть плавающим. Простой ответ на эту проблему заключается в том, чтобы поплавать и в div «действия». Это расширит фон, как ожидалось.

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

источник

2009-03-27 05:43:13

Разрыв div при использовании float

ответ

Смежные вопросы