Div фото вырезано из div box

Question

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

Я закодировал заголовок и изображение статьи, оба в одном и том же div, с границей в нижней части div. Моя проблема: граница появляется сразу после названия и не интегрирует мою картинку.

Заканчивать эту скрипку, чтобы увидеть, что я имею в виду: Click me!

Вот мой код:

<div class="latestarticle"> 
<a class="articletitle" href="#" >Guitar Hero Experts Melt Your Face Off</a> 
<div class="articlepicture"> 
</div> 

и CSS:

.latestarticle { 
border-bottom: solid 1px #CCC; 
padding: 0px; 
margin-top: 12px; 
font-size: 12px; 
} 

.articletitle { 
color: #CD5700; 
text-decoration: none; 
font-weight: bold; 
font-size: 14px; 
margin-bottom: 5px; 
} 
.articlepicture { 
height: 76px; 
width: 136px; 
float: left; 
margin-top: 12px; 
margin-right: 9px; 
border: solid #A3A3A3 2px; 
} 

Answer 1

Я задаюсь вопросом, почему это не работает. Это должно работать, в любом случае, добавить display: table; или display: table-cell; на ваш .latestarticle. Он работает нормально. См Demo

Редактировать

Oh! Я узнал, что эта проблема происходит, потому что вы поплыли налево до своего .articlepicture, и я надеюсь, что вы хотели сделать это как демо.

Я добавил <div class="articlegroup"></div> для .articlepicture DIV и определил его display: inline-block;

DEMO

Answer 2

использование CSS display: block до .articletitle

Answer 3

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

<div class="latestarticle"> 
    <a class="articletitle" href="#">Guitar Hero</a> 
    <div class="articlepicture"></div> 
    <div class="clearfix"></div> 
</div> 

Затем определяют стиль .clearfix в CSS:

.clearfix { clear:both; } 

Answer 4

использование disply:inline-block; для latestarticle .См здесь http://jsfiddle.net/WEHw4/5/