代码如下，老师看一下。PS：效果图中的大DIV的虚线和小DIV的实线并没能找到这两线体
来源：4-12 编程练习
加油啊豪
2020-06-30 02:03:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice.html</title>
<link rel="stylesheet" type="text/css" href="practice.css">
</head>
<body>
<div id="div0">
<div id="div1">
<img src="学习1.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div2">
<img src="学习2.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div3">
<img src="学习3.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div4">
<img src="学习1.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div5">
<img src="学习2.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="div6">
<img src="学习3.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</body>
</html>
#div0{
width: 800px;
height: 370px;
float: left;
border-style: dashed;
padding: 10px;
}
img{
vertical-align: bottom;
float: left;
}
p{
margin-top: 0px;
text-align: center;
}
#div1{
width: 240px;
height: 160px;
float: left;
border-style: solid;
/*margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;*/
margin: 10px;
}
#div2{
width: 240px;
height: 160px;
float: left;
/*margin-left: 30px;*/
border-style: solid;
margin: 10px;
}
#div3{
width: 240px;
height: 160px;
float: left;
/*margin-left: 30px;*/
border-style: solid;
margin: 10px;
/*margin-bottom: 20px;*/
}
#div4{
width: 240px;
height: 160px;
float: left;
/*margin-left: 30px;*/
border-style: solid;
margin: 10px;
}
#div5{
width: 240px;
height: 160px;
float: left;
/*margin-left: 30px;*/
border-style: solid;
margin: 10px;
}
#div6{
width: 240px;
height: 160px;
float: left;
/*margin-left: 30px;*/
border-style: solid;
margin: 10px;
}
3回答
-
同学你好，1. 每个子div的样式是一致的，则建议同学为子div设置样式即可，建议删除div1-div6的样式布局修改为#div0 div{}。如下所示：
2. 为div设置border这样实现是可以的。
3. 当不设置高度、宽度，并清除子元素的浮动时，子元素就可以撑起父元素的宽度与高度。如下所示：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0 -
加油啊豪
提问者
2020-06-30
老师，还有个问题。
如何实现div的width和height跟随div中的内容自动变化？
0 -
加油啊豪
提问者
2020-06-30
老师我在div0-div6中添加如下代码：
border-width: 1px;
border-color: #E0E0E0;
这样实现可以吗？
0
相似问题