3-4编程练习麻烦老师检查一下
来源：3-4 编程练习
慕盖茨9513023
2020-09-03 20:27:21
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<meta charset="UTF-8">
<title>float3-4</title>
<style>
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
.clearfix:after{
content:'.';
height:0;
display:block;
visibility: hidden;
clear:both;
}
.clearfix{
zoom:1;
}
.container{
width:825px;
overflow:hidden;
zoom:1;
}
div{
width:240px;
height:0 auto;
border:1px solid gray;
float:left;
margin:15px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container clearfix">
<div >
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div >
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div >
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div >
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
老师您好，这是我的代码，从结果上看是没有问题的。 我想问您几个问题：1.外面的边框怎么去除？有没有必要去除？2.我这里纯粹是用边框的宽度给把6个div模块分成了2行，3列。不知道还有没有别的更好的实现方法？ 3.我那个宽度是自己加起来的，有个疑问，我总的宽度原本设置的是810=270*3=（240+15*2）*3，但是810并不能把3个div排成一排，所以我就又根据网页显示效果加了15px的宽度，就最终实现结果了，我想问一下，这个是什么原因呢？总的宽度按照道理来说不应该是3个div的宽度总和吗？？？
1回答
-
好帮手慕星星
2020-09-04
同学你好，代码布局是可以的，但是间隙还需要调整
任务中要求各个间隙之间应该是相等的，参考修改
针对提问回复：
1、外层的边框不需要去掉，效果图中外层边框是虚线，自己代码中也可以改为虚线
2、排列为两行不是边框的限制，而是外层大盒子宽度的限制。这样实现是可以的，没问题。
3、关于宽度的计算可以参考上面的修改注释，会更加理解。
祝学习愉快！
0
相似问题