我无法跨度去换行。他们应该坐在图片旁边
这是我的HTML:
<h2>Club Profile Card</h2>
<div class="clubprofilecard">
<h3><a href=""><img src=""/>Row 1
<span>Row 2</span>
<span>Row 3</span>
<span>Row 4</span>
</a></h3>
</div>
这是我的CSS:
.clubprofilecard {
padding-bottom:10px;
margin-bottom:10px;
/**border-bottom:1px solid #d0d0d0;*/
}
.clubprofilecard h3{
position:relative;
font:18px/24px DinWebCond,Sans-serif;
box-sizing:border-box;
padding-left:90px;
margin:0px 0px 15px 0px;
}
.clubprofilecard h3 a{
color:#f06000;
border:none;
text-decoration:none;
}
.clubprofilecard img {
position:absolute;
left: 0px;
top: 0px;
width: 80px;
height: 80px;
border-radius:3px;
}
.clubprofilecard h3 a span
{
white-space:nowrap;
float:left;
display:inline-block;
}
.clubprofilecard h2 {
position:relative;
display:inline-block;
font:22px/22px DinWebCond,Sans-serif;
margin:0px;
padding:0px;
}
这是结果输出:
不太确定在这里做什么。
最佳答案
代替:
.clubprofilecard h3 a span
{
white-space:nowrap;
float:left;
display:inline-block;
}
尝试这个:
.clubprofilecard h3 a span
{
white-space:nowrap;
display:block;
}