老师麻烦看下4-11
来源：4-12 编程练习
无限精彩
2019-08-15 20:05:12
<!DOCTYPE html>
<html>
<head>
<style>
.div{
border: 1px solid;
border-color: silver;
padding: 9px;
box-sizing: border-box;
}
.div1{
float: left;
border: 1px solid;
border-color: silver;
margin: 5px 10px 10px 5px;
}
.div2{
float: left;
border: 1px solid;
border-color: silver;
margin: 5px 10px 10px 5px;
}
.div3{
float: left;
border: 1px solid;
border-color: silver;
margin: 5px 10px 10px 5px;
}
.div4{
float: left;
border: 1px solid;
border-color: silver;
margin: 5px 10px 10px 5px;
}
.div5{
float: left;
border: 1px solid;
border-color: silver;
margin: 5px 10px 10px 5px;
}
.div6{
float: left;
border: 1px solid;
border-color: silver;
margin: 5px 10px 10px 5px;
}
</style>
</head>
<body>
<div>
<div class="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<br>欢迎来到慕课网学习新知识
</div>
<div class="div2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<br>欢迎来到慕课网学习新知识
</div>
<div class="div3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<br>欢迎来到慕课网学习新知识
</div>
<div class="div4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<br>欢迎来到慕课网学习新知识
</div>
<div class="div5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<br>欢迎来到慕课网学习新知识
</div>
<div class="div6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<br>欢迎来到慕课网学习新知识
</div>
</div>
</body>
</html>
老师，问题一：外边框为什么不显示；
问题二：麻烦老师点评下这段代码；
问题三：老师还有没更简便的方法；
问题四；关于块内带文字的情况，添加float：left的理解还是很模糊
1回答
-
好帮手慕柯南
2019-08-16
同学你好！
外边框没有显示，因为没有给最外层的div设置正确的样式，建议给最外层的div一个class=“div0”并且设置固定的宽度以及高度
同学div1-div6的样式都相同可以将其合并为一个class，这样可以减少代码量，并且可以给图片的宽度设置为100%使其填满div，老师对同学的代码进行了一些修改，同学可以看一下：
<!DOCTYPE html> <html> <head> <style> .div0{ width: 810px; height: 375px; border: 1px solid; border-color: silver; padding: 9px; box-sizing: border-box; } .div1{ float: left; border: 1px solid; border-color: silver; margin: 5px 10px 10px 5px; } img{ width: 100%; } </style> </head> <body> <div class="div0"> <div class="div1"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"> <br>欢迎来到慕课网学习新知识 </div> <div class="div1"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"> <br>欢迎来到慕课网学习新知识 </div> <div class="div1"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"> <br>欢迎来到慕课网学习新知识 </div> <div class="div1"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"> <br>欢迎来到慕课网学习新知识 </div> <div class="div1"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"> <br>欢迎来到慕课网学习新知识 </div> <div class="div1"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"> <br>欢迎来到慕课网学习新知识 </div> </div> </body> </html>3.浮动可以简单地其实就是使元素脱离原来的空间，在html中处于另一个空间。同学可以多看几遍视频中的讲解，多练习一下。来加深理解。
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题