Цвет фона не покрывает всю высоту div

--- HTML

<div id = "story">
<div id = "individual">
<img src='uploads/1231924837Picture.png'/>

<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id = "storynav">
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a>  
<a href='home.php?start=5'>6</a>  
<a href='home.php?start=6'>7</a>  
<a href='home.php?start=7'>8</a>  
<a href='home.php?start=8'>9</a>         
</div>
</div>

--- CSS

#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}

#individual{
background-color: #000000;
clear:both;
}

#storynav{
font-size: 10px;
text-align: center;
}

Цвет фона не покрывает всю высоту div
_{(source: bionic-comms.co.uk)}

Приведенный выше код и CSS вызывают у меня головную боль, потому что, как показано на рисунке, цвет фона div путается, когда я добавляю изображения. Это динамический контент, но я подумал, что будет проще показать статический HTML. Кто-нибудь может сказать мне, что я делаю не так? Цвет фона также должен перекрывать изображение. Спасибо!

РЕДАКТИРОВАТЬ

Спасибо за это. Я пробовал это раньше, но ничего не дает. Я также пробовал там прокладку, и это ничего не дает. В замешательстве!

Кому вы отреагируете на правку?

— 14.01.2009 13:52

вы оба предложили мне одно и то же решение. так что я думаю вы оба! :П

— 14.01.2009 15:00

html css

14.01.2009 13:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

16 404

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Прочтите это: http://www.quirksmode.org/css/clearing.html

Короче, попробуйте это:

--- HTML

<div id = "story">
<div id = "individual">
<img src='uploads/1231924837Picture.png'/>

<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id = "storynav">
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a>  
<a href='home.php?start=5'>6</a>  
<a href='home.php?start=6'>7</a>  
<a href='home.php?start=7'>8</a>  
<a href='home.php?start=8'>9</a>
<div class = "clear"></div>
</div>
</div>

--- CSS

#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}

#individual{
background-color: #000000;
clear:both;
}

#storynav{
font-size: 10px;
text-align: center;
}

.clear {
    clear: both;
}

14.01.2009 13:18

Ответ принят как подходящий

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

Вам нужно будет добавить элемент со стилем clear: both; под тегом img в вашем HTML, желательно в конце div следующим образом:

<div id = "story">
<div id = "individual">
<img src='uploads/1231924837Picture.png'/>

<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id = "storynav">
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a>  
<a href='home.php?start=5'>6</a>  
<a href='home.php?start=6'>7</a>  
<a href='home.php?start=7'>8</a>  
<a href='home.php?start=8'>9</a>         
</div>
  <div class = "clear"></div> <-- add this here
</div>

И добавляем класс: