所以我在本网站的内容区域有一个新闻栏目,它显示发布者的头像,标题,然后是小描述。
问题是,标题不能很好地与化身对齐,我认为它在我的垂直对齐的新闻文章之间创造了不必要的空间。
这就是它的样子:
我希望它看起来像:
相关代码:
#news {
float: right;
width: 45%;
}
#news h1 {
font-weight: bold;
background-color: #828CAA;
font-size: 13px;
margin-bottom: 2px;
color: #FFFFFF;
margin: 0px;
}
#news a {
color: #00366C;
margin-top: 3px;
padding-left: 5px;
font-weight: bold;
}
#news p {
padding-left: 5px;
display: inline;
}
#news img.avatar {
margin-top: 5px;
float: left;
border: 1px #00366C solid;
}
<section id="news">
<h1>News</h1>
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a><br>
<p>You should know the drill by now.</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a><br>
<p>And angry.</p>
<br><br><br>
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a><br>
<p>I do believe that it's a review update.....</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a><br>
<p>Games! Games? Games?</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a><br>
<p>Have I?</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a><br>
<p>Click here for lots of exciting new games!</p>
<br><br><br>
</section>
答案 0 :(得分:1)
#news {
float: right;
width: 45%;
}
#news h1 {
font-weight: bold;
background-color: #828CAA;
font-size: 13px;
padding: 5px 5px 0;
color: #FFFFFF;
padding-bottom: 5px;
}
#news a {
color: #00366C;
margin-top: 3px;
padding-left: 5px;
font-weight: bold;
}
#news p {
padding-left: 5px;
display: inline;
}
#news .avatar {
vertical-align: top;
margin: 0;
float: left;
border: 1px #00366C solid;
}
答案 1 :(得分:0)
将标题文字放在范围内,并在顶部添加填充。
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33"><span class="heading-spacer">Review update #126,251,754</span></a><br>
<p>You should know the drill by now.</p>
和css:
.heading-spacer {
display:inline-block;
padding-top:10px;
}
看看是否有类似的东西
这里是一个codepen http://codepen.io/anon/pen/zrgRNp