老师帮忙看看有需要改进的吗
来源：3-4 编程练习
慕仙0287733
2019-10-22 18:48:42
<!DOCTYPE html>
<html>
<head>
<title>3-4</title>
<style type="text/css">
*{margin:0px;padding:0px}
.main{border:0.5px dashed gray;margin:auto;padding:0px;
width:800px;}
.main1,.main2{overflow:hidden;width:780px;margin:auto;margin:20px 10px;}
.one,.two,.three{float:left;padding:0px 10px;text-align:center;}
.four,.five,.six{float:left;padding:0px 10px;text-align:center;}
</style>
</head>
<body>
<div class="main">
<div class="main1">
<div class="one"><div class="img1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div><p>欢迎来到慕课网学习新知识!</p></div>
<div class="two"><div class="img2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div><p>欢迎来到慕课网学习新知识!</p></div>
<div class="three"><div class="img3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div><p>欢迎来到慕课网学习新知识!</p></div></div>
<div class="main2">
<div class="four"><div class="img4"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div><p>欢迎来到慕课网学习新知识!</p></div>
<div class="five"><div class="img5"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div><p>欢迎来到慕课网学习新知识!</p></div>
<div class="six"><div class="img6"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div><p>欢迎来到慕课网学习新知识!</p></div></div>
</div>
</body>
</html>
老师请帮忙看看除了用表格布局之外，有更好的方法布局吗？感觉这样的布局代码有点长，想问下老师有没有更好的方法。
1回答
-
同学你好！
这样布局也是可以的。根据效果图，图片和p是放在一个div中的，而且有边框设置，建议给one等div设置边框：
那么整体的宽度需要修改：
不过整体布局有一些冗余，建议去除main1和main2的div嵌套，直接使用6个小div来包裹img和p标签。
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题