老师，请帮检查一下
来源：4-12 编程练习
视线模糊
2020-04-06 10:10:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-11编程练习</title>
<style type="text/css">
#div{
width: 800px;
height: 370px;
border: 1px gray dotted;
margin:auto;
}
#div0{
margin: 20px;
width: 760px;
float:left;
}
#div1,#div4{
float: left;
}
#div2,#div3,#div5,#div6{
float: left;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="div">
<div id="div0">
<div id="div1">
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<div>
欢迎来到慕课网学习新知识！
</div>
</div>
<div id="div2">
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
</div>
<div>
欢迎来到慕课网学习新知识！
</div>
</div>
<div id="div3">
<div>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
</div>
<div>
欢迎来到慕课网学习新知识！
</div>
</div>
<div id="div4">
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<div>
欢迎来到慕课网学习新知识！
</div>
</div>
<div id="div5">
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
</div>
<div>
欢迎来到慕课网学习新知识！
</div>
</div>
<div id="div6">
<div>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
</div>
<div>
欢迎来到慕课网学习新知识！
</div>
</div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕阿慧
2020-04-06
同学你好，
1、每个小模块样式要包含边框和内外边距，给每个模块加上边框后，同学代码运行效果如下图：
2、应该计算好每个小模块的宽和高，然后加上margin，padding，border的值，最终得出最外层div的宽高。修改代码如下：
(a)外层div：6个小模块外面只需一个div，去掉id为div的div。设置#div0样式：宽高，边框，内边距。代码如下图：
(b)每个小模块样式设置左浮动，设置宽高，外边距，边框。代码如下图：
(c)清除浮动，使外层div包含6个小模块。代码如下图：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题