请问一个换行的问题

MeadaAtsuko 2017-07-21 11:20:05

上面的图片我想让 “123图片” 放在“夏天来了又走了”的后面但是a标签虽然设置了inline-block 但是还是会独占一行

如果都改成行内元素的话 a标签的行高总是莫名的增加

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行高</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
div{
width: 170px;
height: 250px;
margin:10px auto;
}
img{
display: inline-block;
width: 170px;
height: 170px;
vertical-align: top;
}
div a{
display: inline-block;
font: 12px/19px arial;
text-decoration: none;
color: #37a;
vertical-align: top;
float: left;
}
div span{
display: inline-block;
font: 12px/19px arial;
color:#999;
vertical-align: top;
float: right;
}
</style>
</head>
<body>
<div>
<img src="images/1.webp"><a href="#">夏天来了又走了夏天来了又走了夏天来了又走了</a><span>123张照片</span>
</div>
</body>
</html>

...全文

260 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

血界 2017-09-24

打赏
举报

是这样吗

天际的海浪 2017-07-21

打赏
举报


*{
margin:0px;
padding: 0px;
}
div{
width: 170px;
height: 250px;
margin:10px auto;
font: 12px/15px arial;
}
img{
display: inline-block;
width: 170px;
height: 170px;
vertical-align: top;
}
div a{
text-decoration: none;
color: #37a;
}
div span{
color:#999;
float: right;
}

技术专家手把手教你做网站，HTML青少儿编程原创课程。理论讲解+实战案例，最终呈现一个炫酷网站技术专家手把手教你做网站，HTML第一站，连载课大纲如下：HTML第一站第一课：HTML介绍（此为直播，https://study.163.com/course/courseMain.htm?courseId=1210645801&share=2&shareId=480000001918401可以看回放）HTML第一站第二课：HTML语法HTML第一站第三课：body元素HTML第一站第四课：HTML结构HTML第一站第五课：标题HTML第一站第六课：div元素HTML第一站第七课：属性HTML第一站第八课：显示文本HTML第一站第九课：样式文本HTML第一站第十课：换行HTML第一站第十一课：无序列表HTML第一站第十二课：有序列表HTML第一站第十三课：图片HTML第一站第十四课：图片替代HTML第一站第十五课：视频HTML第一站第十六课：复习