从div箱中剪出的div图片

我只是在适应网页设计，当我发现一个问题，并且无法自行解决问题时。从div箱中剪出的div图片

我编码了一个标题和一个文章图片，都在同一个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; 
}

来源

2013-04-20 JSt

使用浮动：留在你的latestarticle股利。这应该做的伎俩 – dinukadev 2013-04-20 03:39:57

我不知道为什么这是行不通的。这应该工作，无论如何，请将display: table;或display: table-cell;添加到.latestarticle。它工作正常。见Demo

编辑

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

我已经加入<div class="articlegroup"></div>您.articlepicture DIV，并将其定义display: inline-block;

DEMO

来源

2013-04-20 04:55:30

使用CSS display: block到.articletitle

来源

2013-04-20 03:38:49

我认为你要找的是一个clearfix。如果您希望父级识别浮动元素的高度，则需要将“clearfix”div添加为浮动元素的同级元素。

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

然后在CSS定义.clearfix风格：

.clearfix { clear:both; }

来源

2013-04-20 03:41:16 middleinitial

使用disply:inline-block;为latestarticle。看到这里http://jsfiddle.net/WEHw4/5/

来源

2013-04-20 03:47:26 PSR

@JSt检查我的答案一次。它是为你工作 – PSR 2013-04-20 03:48:44

从div箱中剪出的div图片

回答

相关问题