我为了实现两行三列的效果,设置了三级div。老师您看,这样编程符合要求吗
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div1{
float:left;
border:1px dashed gray;
box-sizing:border-box;
padding:20px 0px 0px 20px;
}
.div2{
float:left;
border:1px solid gray;
margin:0px 20px 20px 0px;
}
p{
margin:0px;
text-align:center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div1">
<!--两个div3之间是按照标准文档流排列-->
<div id="div3">
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
<!--两个div3之间是按照标准文档流排列-->
<div id="div3">
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</div>
</body>
</html>10
收起
正在回答
1回答
同学你好!这样写也是可以的呢,代码没有标准答案,效果实现了就是可以的。祝学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星