Как я могу убедиться, что div сохраняет оставшееся горизонтальное пространство?

Question

Я пытаюсь создать свой собственный сайт с нуля, теперь я столкнулся с проблемой, рассматривая бит HTML/CSS.

Я пытаюсь создать этот стандарт «заголовок, навигация, содержание» макет, где заголовок находится сверху, навигация слева и содержание начинается ниже заголовка и справа от навигации

Я использую следующий фрагмент кода:

<div id="head"> 
<img src="..." id="logo" style="float:left"> 
</div> 
<div id="nav"> 
    {some elements} 
</div> 
<div id="content"> 
{some elements} 
</div> 

Но как только «= стиль" поплавок: левый»добавляется в мой код,«содержание»и«нав»Див автоматически перемещается вправо «голова» DIV, возможно ли каким-то образом сделать «головной» DIV «резерв» оставшимся пространством, чтобы «контент» и «nav» DIV не двигались справа от него, а оставались ниже?

Answer 1

Добавить overflow:hidden в элемент #head. Я не знаю, почему это работает, но это гарантирует, что все плавающие элементы содержатся внутри родителя.

Answer 2

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

Добавить CSS в таблице стилей:

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

И добавить класс «clearfix» в ваш заголовок, как

<div id="head" class="clearfix"> 
    <img src="..." id="logo" style="float:left"> 
</div> 

Для получения дополнительной информации по очистке поплавков вы можете проверить этот адрес - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

Answer 3

<div style="width:250px;"> 
    <div id="head" style="width:100%; border:1px solid red;"> 
    <img src="..." id="logo"> Header-Logo 
    </div> 
    <div id="nav" style="float:left;width:47%;border:1px solid blue;"> 
    Navigation-Left 
    </div> 
    <div id="content" style="float:right; width:50%;border:1px solid blue;"> 
    Content-Right 
    </div> 
</div> 

Я думаю, причина в том "float: left" внутри тега id = "head". Поскольку вы хотите разместить заголовок в верхней части веб-сайта, не нужно использовать для него «float: left».

-Вы можете использовать «поплавок: левый» для тега ID = «нав» и «Поплавок: правый» для тега ID = «содержание»

Вот результат: http://jsfiddle.net/4JgA4/119/ => Не нужно замечать всю мою информацию внутри некоторых тегов (Только для украшений: D)

Answer 4

Очистка поплавков.

Вам нужно добавить класс в DIV и в вашем CSS, как показано ниже:

.clear 
{ 
    clear:both; 

}