3-2编程练习
来源：3-1 实战分析
慕斯卡4413583
2017-11-02 14:56:58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
*{padding: 0px;
margin: 0px;}
.constrain{
width: 800px;
height: 320px;
border:30px solid red;
float: left;
}
.block1{
float: left;
width: 240px;
height: 160px;
}
.block2{
float: left;
width: 240px;
height: 160px;
}
.block3{
float: left;
width: 240px;
height: 160px;
}
.block4{
float: left;
width: 240px;
height: 160px;
}
.block5{
float: left;
width: 240px;
height: 160px;
}
.block6{
float: left;
width: 240px;
height: 160px;
}
</style>
</head>
<body>
<div class="contrain">
<div class="block1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="block6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
设置了所有子元素的宽度和高度，也设置了父元素和元素的浮动，设想的是，当第四个子元素的宽度已经超过父元素的宽度时，第四个子元素下移到第二行，为什么没办法实现这样子的效果
1回答
-
小丸子爱吃菜
2017-11-02
任务里面有说明，这是一个两行三列的布局，那么就要有两个大的div去装这些图文，一个div里有3个图文，而且预设代码也给与布局，可以用预设代码给的html布局。
每个div的宽度要设置好，宽度等于里面3个图文元素宽度的总和哦~再试一下吧！
祝学习愉快！
0
相似问题