老师，我的Gallery不能往下移了
<!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>Document</title>
<link rel="stylesheet" href="css/CSS.CSS">
</head>
<body>相关代码：
<!-- Header区域 -->
<div class="header">
<div class="box1">
<div class="logo">
<img src="images/logo.png" alt="">
</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>
</div>
<!-- Banner区域 -->
<div class="banner">
<!-- Banner图片 -->
<div class="banner-img">
<img src="images/banner3.jpg" alt="">
</div>
<div class="banner-mask"></div>
<div class="banner-form">
<form action="">
<p>
<input class="name" type="text" placeholder="your Name">
</p>
<p>
<input class="phone" type="text" placeholder="your Phone">
</p>
<p>
<input class="email" type="email" placeholder="your Email">
</p>
<p>
<textarea class="comment" name="" id="" cols="30" rows="5"
placeholder="Write Your Comment Here"></textarea>
</p>
<p>
<input class="submit" type="submit" value="SEND MESSAGE">
</p>
</form>
</div>
</div>
<!-- About区域 -->
<div class="about">
<div class="box2">
<!-- 上半部 -->
<div class="shangbanbu">
<h2 class="title">ABOUT</h2>
<!-- 分割线 -->
<div class="line1"></div>
<p class="para1">Lorem Ipsum is simply dummy text of the printing and typesetting <br>industry. Lorem Ipsum has been the
industry's standard
dummy text<br> ever since the 1500s.</p>
</div>
<!-- 下半部 -->
<div class="xiabanbu">
<h2 class="title">A WORD <br>ABOUT US</h2>
<div class="left">
<p class="left1">
Praesent dignissim viverra est, sed<br> bibendum ligula congue non. Sed<br> ac nisl et felis gravida
commodo?<br>
Suspendisse eget
ullamcorper <br>ipsum. Suspendisse diam amet.
</p>
<p class="left2">EXPLORE</p>
</div>
<img class="photo1" src="images/bb3.jpg" alt="">
<div class="right">
<div class="right1">
<span>70000</span>
<p></p>
<span class="stu">Students</span>
</div>
<div class="right2">
<span>600</span>
<p></p>
<span class="fac">Faculty</span>
</div>
</div>
</div>
</div>
</div>
<!-- 图文混排区域 -->
<div class="images-text">
<div class="img">
<p><img src="images/b1.jpg" alt=""></p>
</div>
<div class="text">
<h3>Library</h3>
<p class="part1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="part2">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>
<a href="">EXPLORE</a>
</div>
<div class="img">
<p><img src="images/b2.jpg"></p>
</div>
<div class="text">
<h3>Library</h3>
<p class="part1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="part2">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>
<a href="">EXPLORE</a>
</div>
<div class="text">
<h3>Library</h3>
<p class="part1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="part2">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>
<a href="">EXPLORE</a>
</div>
<div class="img">
<img src="images/b3.jpg">
</div>
<div class="text">
<h3>Library</h3>
<p class="part1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="part2">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>
<a href="">EXPLORE</a>
</div>
<div class="img">
<img src="images/b4.jpg">
</div>
</div>
<!-- Gallery区域 -->
<div class="gallery">
<div class="shang">
<div class="title">
<h2>GALLERY</h2>
</div>
<p class="line"></p>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry.Lorem Ipsum has been the
industry's standard dummy text<br> ever since the 1500s</p>
</div>
<div class="xia">
<dl>
<dt><img src="images/03-01.jpg" alt=""></dt>
<dd>Science Lab</dd>
</dl>
<dl>
<dt><img src="images/03-02.jpg" alt=""></dt>
<dd>Indoor Stadium</dd>
</dl>
<dl>
<dt class="spec"><img src="images/03-03.jpg" alt=""></dt>
<dd>Transportation</dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg" alt=""></dt>
<dd>Kids Room</dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg" alt=""></dt>
<dd>Meditation Classes</dd>
</dl>
<dl>
<dt class="spec"><img src="images/03-06.jpg" alt=""></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
<!-- Footer区域 -->
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
相关代码：
/* GALLERY区域 */
.gallery .shang {
margin-top: 30px;
}
.gallery .title h2 {
font-size: 32px;
text-align: center;
}
.gallery .shang p.line {
width: 60px;
height: 3px;
margin: 10px auto;
background: #07cbc9;
}
.gallery .shang p.text {
font-size: 14px;
color: gray;
text-align: center;
}
.gallery .xia {
width: 1200px;
height: 653px;
margin: 0 auto;
}
.gallery .xia dl {
float: left;
}
.gallery .xia dl dt {
display: block;
width: 360px;
height: 240px;
margin-right: 40px;
}
.gallery .xia dl dt.spec {
margin-right: 20px;
}
.gallery .xia dl dd {
width: 340px;
height: 50px;
background-color: black;
color: white;
margin-bottom: 30px;
padding-left: 20px;
line-height: 50px;
}
.footer {
width: 100%;
height: 80px;
background-color: #07cbc9;
}
.footer p {
text-align: center;
line-height: 80px;
}
相关截图：
8
收起
正在回答
1回答
同学你好，只粘贴了部分css样式，无法还原效果，老师这边gallery是可以下移的。建议将所有的css全部粘贴上来，便于帮助解决，也可以先检查下是不是上面元素设置固定高度比较小导致的。
另外gallery这部分图文混排没有居中
右侧的间隙是因为设置右侧间距导致的，而左侧没有。建议修改为左右两侧间距，添加在dl上，如下：
祝学习愉快！
相似问题
gallery区怎么设置了没用
0
0
3
老师我顶部的下拉菜单 单鼠标移上去会往右移动一下
0
0
3
老师我这搞了好久两种都是了就是不行啊
9
0
6
老师，设置了浮动的元素是不是全部都会在一行显示?
56
0
9
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星