图文混排失败
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图文混排</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
height: 760px;
width: 100%;
position: relative;
background-color: aquamarine;
}
.box1,box2,box3,box4{
height: 380px;
width: 25%;
}
.wrap img{
display: block;
width: 25%;
height: 380px;
}
.wrap .spec{
display: block;
width: 25%;
height: 380px;
}
.wrap .spec h2{
font-size: 24px;
color:white;
padding: 20px;
}
.wrap .spec .p1{
color: white;
font-size: 16px;
padding: 20px;
padding-top: 10px;
}
.wrap .spec .p2{
color: grey;
padding: 0 20px;
font-size: 11px;
}
.wrap .spec input{
display: block;
background-color: black;
color: white;
margin: 5px auto;
text-align: center;
height: 40px;
width: 138px;
}
.wrap .box1{
float: left;
}
.wrap .box2{
float: left;
}
.wrap .box3{
float: left;
}
.wrap .box4{
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">
<img src="images/b1.jpg" alt="">
<div class="spec">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</div>
</div>
<div class="box2">
<div class="spec">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</div>
<img src="images/b2.jpg" alt="">
</div>
<div class="box3">
<img src="images/b3.jpg" alt="">
<div class="spec">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</div>
</div>
<div class="box4">
<div class="spec">
<h2>Library</h2>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
<img src="images/b4.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
老师我这个怎么浮动啊，四个盒子我都设置了.box1,box2,box3,box4的宽高，我思路是背景里放从左往右四个盒子，每个盒子了有两个盒子，这两个盒子不需浮动，只要浮动外面四个盒子就行了。
还有最下面的按钮按照题目要求的边框值会掉出来，所以我设置了上下5像素，是不是出题有误啊4
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星