我只是在调整网页设计,当我发现问题并且无法自己解决问题时。
我在同一个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;
}
答案 0 :(得分:0)
将css display: block
用于 .articletitle
答案 1 :(得分: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; }
答案 2 :(得分:0)
使用disply:inline-block;
获取最新文章。请访问http://jsfiddle.net/WEHw4/5/
答案 3 :(得分:0)