为什么GALLERY区域文字会上移，已经清清除浮动了啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<link rel="stylesheet" href="css/index.css">
<style type="text/css">
*{
margin:0;
padding:0;
font-family:Microsoft YaHei UI;
}
.container{
width:1400px;
height:3000px;
background:white;
margin:0 auto;
}
.header{
height:80px;
background:#07cbc9;
}
.header .logo{
float:left;
height:50px;
padding:15px 150px;
}
.header .nav{
float:right;
width:500px;
height:55px;
font-size:13px;
font-weight:bold;
color:white;
padding-top:25px;
}
.header .nav ul{
list-style:none;
}
.header .nav ul li{
float:left;
padding:10px;
}
.banner{
width:100%;
height:600px;
position:relative;
}
.banner img{
width:100%;
height:600px;
display:block;
border:0 none;
}
.banner .opacity_{
width:1340px;
height:600px;
margin-left:60px;
opacity:0.5;
background:black;
position:absolute;
top:0;
left:0;
}
.login{
/*background:yellow;*/
width:534px;
height:500px;
position:absolute;
left:50%;
top:50%;
margin-left:-240px;
margin-top:-250px;
}
.login form{
text-align:center;
padding-top:40px;
}
.login form input,textarea{
background-color:transparent;
margin-top:15px;
padding-left:10px;
border:1px solid #808080;
}
.login form button{
background-color:transparent;
width:130px;
margin-top:15px;
border:1px solid #808080;
}
.login form input,button{
height:30px;
color:#808080;
}
.login form textarea{
padding-top:10px;
}
.login input:hover,
.login textarea:hover {
border:1px solid #07cbc9;
}
.login button:hover {
border:none;
background-color:#07cbc9;
}
.about{
width:1400px;
height:700px;
background-color:white;
text-align:center;
margin:0 auto;
/*overflow:hidden;*/
}
.about .tp>h1{
margin-top:40px;
margin-bottom:15px;
}
hr{
width:50px;
margin:0 auto;
border:0.8px solid #07cbc9;
color:#07cbc9;
}
.about .tp p{
font-size:15px;
font-family:"宋体";
padding:15px;
}
.about>.mid{
width:1400px;
height:350px;
/*background:blue;*/
position:relative;
overflow:hidden;
}
.about>.mid>.left,
.about>.mid>.mid,
.about>.mid>.right{
float:left;
}
.about>.mid>.left{
width:350px;
height:300px;
/*background:yellow;*/
text-align:left;
position:absolute;
left:200px;
top:0px;
z-index:2;
}
.about>.mid>.left>.tit{
width:150px;
height:80px;
/*background-color:orange;*/
text-align:center;
font-size:28px;
}
/*.about>.mid>.left>.main{
margin-top:20px;
margin-left:20px;
}*/
.about>.mid>.left>.main>.cont{
width:300px;
height:180px;
padding-left:20px;
padding-top:20px;
/*background:;*/
/*background:transparent;*/
/*background-color:#FFFBF9;*/
font-size:13px;
border: 1px solid #C5C5C5;
background:rgba(255,255,255,0.4);
}
.about>.mid>.left button{
width:80px;
height:35px;
margin-top:20px;
border:none;
background-color:black;
color:white;
}
.about>.mid>.mid{
width:500px;
height:350px;
/*background:orange;*/
position:absolute;
left:450px;
top:0px;
}
.about>.mid>.mid img{
width:500px;
height:320px;
}
.about>.mid>.right{
width:300px;
height:300px;
/*background:red;*/
position:absolute;
left:980px;
top:0px;
}
.about>.mid>.right>.top{
width:180px;
height:120px;
/*background-color:yellow;*/
border:1px solid #07CBC9;
}
.about>.mid>.right>.top h2,
.about>.mid>.right>.bottom h2{
margin-top:15px;
margin-bottom:15px;
}
.about>.mid>.right>.bottom{
width:180px;
height:120px;
/*background-color:blue;*/
margin-top:25px;
border:1px solid #07CBC9;
}
.about>.mid>.right>.bottom p{
margin-top:15px;
}
.about>.btm{
width:1400px;
height:700px;
text-align:center;
margin:0 auto;
}
.about>.btm>.top{
width:1400px;
height:350px;
background-color:green;
overflow:hidden;
}
.about>.btm>.bottom{
width:1400px;
height:350px;
background-color:orange;
overflow:hidden;
}
.about>.btm>.top>.img1,
.about>.btm>.top>.img1 img,
.about>.btm>.top>.img2,
.about>.btm>.bottom>.img1,
.about>.btm>.bottom>.img2
{
width:350px;
height:350px;
}
.about>.btm>.top>.cont1,
.about>.btm>.top>.cont2,
.about>.btm>.bottom>.cont1,
.about>.btm>.bottom>.cont2
{
width:320px;
height:320px;
/*background-color:yellow;*/
}
.about>.btm>.top>.img1,
.about>.btm>.top>.cont1,
.about>.btm>.top>.img2,
.about>.btm>.top>.cont2,
.about>.btm>.bottom>.img1,
.about>.btm>.bottom>.cont1,
.about>.btm>.bottom>.img2,
.about>.btm>.bottom>.cont2{
float:left;
}
.same1{
background-color:#07cbc9;
color:#ffffff;
text-align:left;
padding-top:30px;
padding-left:30px;
}
.same1 div{
font-size:20px;
}
.same1 .p1{
font-size:13px;
padding-top:15px;
padding-bottom:15px;
}
.same1 .p2{
font-size:10px;
/*padding-top:10px;*/
padding-bottom:15px;
color:#DDDBD7;
}
.same1 button{
margin-top: 50px;
margin-left:100px;
background:#000;
color:#ffffff;
border:none;
width:80px;
height:35px;
border:none;
}
.same1 button:hover {
background:transparent;
border:3px solid #000;
}
.gallery{
width:1400px;
height:1100px;
background:yellow;
}
.about .btm .bottom{
overflow:hidden;
}
.gallery .inner{
width:800px;
height:800px;
background-color:red;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="banner">
<img src="images/banner3.jpg">
<div class="opacity_"></div>
<div class="login">
<form>
<input type="text" placeholder="your Name" size="50"><br/>
<input type="text" placeholder="your Phone" size="50"><br/>
<input type="text" placeholder="your Email" size="50"><br/>
<textarea rows="5" cols="50" placeholder="Write Your Comment Here"></textarea><br/>
<button>SEND MESSAGE</button>
</form>
</div>
</div>
<div class="about">
<div class="tp">
<h1>ABOUT</h1>
<hr>
<p>Lorem Ipsum is simply text of the printing and typesetting<br/>
industry.Lorem Ipsum has been the industry's standard dummy<br/>
textever since the 1500s.
</p>
</div>
<div class="mid">
<div class="left">
<div class="tit">
A WORD<br>
ABOUT US
</div>
<div class="main">
<div class="cont">
Praesent dignissim viverra est,sed<br>
bibendum ligula congue non.Sed ac nisl<br>
et felis gravida commodo? Suspendisse<br>
eget ullamcorper ipsum.Suspendisse<br/>
diam amet.<br>
<button>EXPLORE</button>
</div>
</div>
</div>
<div class="mid">
<img src="images/bb3.jpg">
</div>
<div class="right">
<div class="top">
<h2>70000</h2>
<hr>
<p>Students</p>
</div>
<div class="bottom">
<h2>600</h2>
<hr>
<p>Faculty</p>
</div>
</div>
</div>
<div class="btm">
<div class="top">
<div class="img1">
<img src="images/b1.jpg">
</div>
<div class="cont1 same1">
<div>Library</div>
<p class="p1">
Lorem Ipsum is simply dummy text of the<br/>
printing and typesetting industry
</p>
<p class="p2">
Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s,when an unkonwn printer took<br/>
a galley of type and scrambled it make a type<br/>
specimen book.
</p>
<button>EXPLORE</button>
</div>
<div class="img2">
<img src="images/b2.jpg">
</div>
<div class="cont2 same1">
<div>Computer Lab</div>
<p class="p1">
Lorem Ipsum is simply dummy text of the<br/>
printing and typesetting industry
</p>
<p class="p2">
Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s,when an unkonwn printer took<br/>
a galley of type and scrambled it make a type<br/>
specimen book.
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="bottom">
<div class="cont1 same1">
<div>Conference Hall</div>
<p class="p1">
Lorem Ipsum is simply dummy text of the<br/>
printing and typesetting industry
</p>
<p class="p2">
Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s,when an unkonwn printer took<br/>
a galley of type and scrambled it make a type<br/>
specimen book.
</p>
<button>EXPLORE</button>
</div>
<div class="img1">
<img src="images/b3.jpg">
</div>
<div class="cont2 same1">
<div>Play Ground</div>
<p class="p1">
Lorem Ipsum is simply dummy text of the<br/>
printing and typesetting industry
</p>
<p class="p2">
Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s,when an unkonwn printer took<br/>
a galley of type and scrambled it make a type<br/>
specimen book.
</p>
<button>EXPLORE</button>
</div>
<div class="img2">
<img src="images/b4.jpg">g
</div>
</div>
</div>
</div>
<div class="gallery">
<div class="inner">
<h1>ABOUT</h1>
<hr>
<p>Lorem Ipsum is simply text of the printing and typesetting<br/>
industry.Lorem Ipsum has been the industry's standard dummy<br/>
textever since the 1500s.
</p>
</div>
<div class="image"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
1回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星