2

当我发现问题并且无法自己解决时，我只是在调整网页设计。

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

看看这个小提琴，看看我的意思：点击我！

这是我的代码：

<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;
}
4

4 回答 4

0

用于disply:inline-block; 最新文章。请参阅此处 http://jsfiddle.net/WEHw4/5/

于 2013-04-20T03:47:26.297 回答
0

我认为你正在寻找的是一个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-20T03:41:16.733 回答
0

使用 cssdisplay: block到.articletitle

于 2013-04-20T03:38:49.097 回答
0

我想知道为什么这不起作用。无论如何，这应该可以工作，将display: table;或添加display: table-cell;到您的.latestarticle. 它工作正常。看演示

编辑

哦！我知道这个问题正在发生，因为你已经向左飘了.articlepicture，我希望你想做演示。

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

演示

于 2013-04-20T04:55:30.727 回答