练习寻求改进
来源：4-11 编程练习
慕瓜3065625
2020-08-28 17:50:24
显示没问题，但我并没有设置父类容器和子类容器的宽高以及外边距，这样跟其他同学中设置以上参数的相比是否存在弊端，以及如果我要居中显示，是要设置父类容器的宽度到其max值吗？如果是怎么快速去确定应该设多少宽度
代码如下：
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
div{
background-color:red;
}
#div1,#div2,#div3,#div4,#div5,#div6{
/*border:0px;*/
float:left;
}
#div4{
clear:both;
}
p{
margin-top:0px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div>
<div id="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" >
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div id="div2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" >
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div id="div3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" >
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div id="div4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" >
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div id="div5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" >
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div id="div6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" >
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
1回答
-
同学你好
同学可以认真完成练习很棒，但同学最后的呈现和要求的结果是有些不一致的，
所以，还是建议同学按照作业的要求来完成作业
1、首先，没有设置父类容器和子类容器的宽高以及外边距会让所有的图片挤到一起，1是不符合作业要求，2是不美观 3如果使用浮动后，其实父容器的高度是0，如果页面有其他内容，可能产生新的问题 ，例如浮动塌陷。
2、同学设置宽高的时候可以算一下子元素的宽高，加上外边距，以及边框的宽度等，算出父容器的宽高，
例如 图片宽是240px ，外边距是20px ，边框宽度是1px
则三个并排时，父容器的宽是：
240*3+1px*6+20px*4 = 806px
建议同学可以重新按照作业要求完成一下
3、例如这些div大部分都是重复时，可以设置class代替设置id，共同部分的设置用class属性去设置，特殊部分用对应的id去设置就可以了，同学就不用在写css的时候写很多的#div1，#div2之类的了
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题