怎么让浮动后面的盒子换行呢
<!DOCTYPE html>
<html>
<head>
<style>
.box{width:100%;height:100%;border:solid 1px #ccc;;}
.wd{float:left;;border:solid 1px #ccc;margin:10px 10px 10px 20px;}
.wc{float:left;;border:solid 1px #ccc;margin:10px 10px 10px 10px;}
.we{float:left;;border:solid 1px #ccc;margin:10px;10px 10px 10px}
.clearfix:after{
content:' ';
height:0;
display:block;
visibility:hidden;
clear:both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="wd"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"><br><span>欢迎来到慕课网学习新知识！</span></div>
<div class="wc"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"><br><span>欢迎来到慕课网学习新知识！</span></div>
<div class="we"><img src=http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg><br><span>欢迎来到慕课网学习新知识！</span></div>
<div class><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"><br><span>欢迎来到慕课网学习新知识！</span></div>
<div><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"><br><span>欢迎来到慕课网学习新知识！</span></div>
<div><img src=http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg><br><span>欢迎来到慕课网学习新知识！</span></div>
</div>
</body>
</html>0
收起
正在回答
1回答
同学你好，1、浮动之后的盒子是在一行显示的。要让不在一行显示，可以去掉最后一个盒子的浮动哦。不过我们这个，其实可以设置下大盒子的宽度。然后设置大盒子水平居中。可以参考如下的修改思路哦。
2、如下，分号应该在最后哦。
3、如下，多一个分号，可以去掉哦。
4、所有的子元素div都需要设置边框与间距，可以统一设置。且左右的外边距要设置一致。例：
5、如下，属性值后面也多一个分号，可以去掉哦。
6、一个小盒子单元占据的宽度是262px（包括左右的外边距与边框），一行三个，所以大盒子的宽度可以设置786px，且可以设置大盒子水平居中。例：
希望能帮助到你，欢迎采纳。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星