为什么设置不了block的宽度，使得一行只显示三个图片？而且p的字体也显示不出来
来源：4-12 编程练习
Paranoia_17
2019-10-28 19:59:15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#content: {
border-style: dashed;
border-color: grey;
float: left;
width: 800px;
}
.block{
margin: 10px;
border-style: dashed;
border-color: grey;
border-width: 1px;
float: left;
}
p{
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
font-family: "楷体";
}
</style>
</head>
<body>
<div id="content">
<div class="block">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕柯南
2019-10-29
同学你好！
使一行只显示三个图片，同学应该设置最外层的div的宽度与三个图片区域的宽度（包括边框以及margin的宽度）相同，这样剩下的三个由于最外层的div放不下，就会显示在第二行了，比如：
老师这里的字体是可以正常显示的，这可能是同学的电脑上没有安装楷体这个字体，或者是浏览器不支持，同学的代码是没有问题的，可以更换其它字体测试一下
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题