css - div图片裁剪出来的div框

Question

当我发现一个问题并且无法自行解决时，我正在调整一个网页设计。

我在同一个 div 中编写了标题和文章图片，并在 div 底部添加了边框。我的问题:边框紧跟在标题之后并且没有整合我的图片。

看看这个 fiddle ，看看我的意思: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

编辑

哦!我开始知道这个问题正在发生，因为你已经向左浮动到你的 .articlepicture我希望你想做演示。

我已经添加了 <div class="articlegroup"></div>为你的.articlepicture div 并定义它 display: inline-block;

DEMO