about区域中间部分布局问题

about区域中间部分布局问题

index.html代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>2-9页面布局作业</title>
 <link rel="stylesheet" type="text/css" href="cssFile/headerCss.css">
 <link rel="stylesheet" type="text/css" href="cssFile/bannerCss.css">
 <link rel="stylesheet" type="text/css" href="cssFile/aboutCss.css">
 <link rel="stylesheet" type="text/css" href="cssFile/galleryCss.css">
 <link rel="stylesheet" type="text/css" href="cssFile/footerCss.css">
</head>
<body>
 <!--顶部部分-->
 <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>
 <!--banner部分-->
 <div class="banner">
  <div class="bannerImg">
   <img src="images/banner3.jpg">
  </div>
  <div class="ImgLayer"></div>
  <div class="sendMassage">
   <input type="text" name="userName" placeholder="  your Name">
   <input type="text" name="userPhone" placeholder="  your Phone">
   <input type="text" name="userEmail" placeholder="  your Email">
   <input type="text" name="userComment" style="">
   <button>SEND MASSAGE</button>
  </div>
 </div>
 <!--ABOUT部分-->
 <div class="about">
  <!--ABOUT顶部-->
  <div class="about_top">
   <label class="title">ABOUT</label>
   <label class="line"></label>
   <label class="description">Lorem Ipsum is simply dummy text of the printing and ypesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</label>
  </div>
  <!--ABOUT中间部分-->
  <div class="about_middle">
   <!--左侧部分-->
   <div class="left">
    <div class="word1">
     <label>A WORD<br>ABOUT US</label>
    </div>
    <div class="word2">
     <label>Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.
     </label>
     <div>
      <button>EXPLORE</button>
     </div>
    </div>
   </div>
   <!--中间部分-->
   <div class="center">
    <img src="images/bb3.jpg">
   </div>
   <!--右侧部分-->
   <div class="right">
    
   </div>
  </div>
  <div style="clear: both;"></div>
  <!--ABOUT底部-->
  <div class="about_bottom"></div>
 </div>
</body>
</html>

headerCss.css代码如下：

*{
 margin: 0px;
 padding: 0px;
}
.header{
 width: 100%;
 height: 100px;
 background-color: #07cbc9;
}
.header .logo{
 float: left;
 padding-left: 100px;
 padding-top: 25px;
}
.header .nav{
 float: right;
 padding-right: 100px;
}
.header .logo img{
 height: 50px;
}
.header .nav ul li{
 float: left;
 list-style: none;
 width: 80px;
 color: #ffffff;
 font-weight: bold;
 line-height: 100px;
}

bannerCss.css代码如下：

.banner{
 width: 100%;
 position: absolute;
 top: 100px;
}
.bannerImg{
 width: 100%;
 position: absolute;
 top: 0px;
}
.bannerImg img{
 width: 100%;
 height: 600px;
}
.banner .ImgLayer{
 width: 100%;
 height: 600px;
 top: 100px;
 left: 0px;
 background-color: #000;
 opacity: 0.4;
}
.banner .sendMassage{
 width: 500px;
 height: 400px;
 /*background-color: cyan;*/
 position: absolute;
 top: 70px;
 right: 50%;
 margin-right: -250px;
}
.banner .sendMassage input[type="text"]{
 width: 496px;
 height: 50px;
 margin-top: 30px;
 font-size: 20px;
 color: #FFFFFF;
 line-height: 50px;
 border: 2px solid #7D7C7F;
 background-color: transparent;
}
.banner .sendMassage input[type="text"]:hover{
 border: 2px solid #07cbc9;
 background-color: transparent;
}
.banner .sendMassage button{
 width: 200px;
 height: 50px;
 color: #FFFFFF;
 line-height: 50;
 margin-top: 30px;
 margin-left: 150px; 
 font-size: 20px;
 color: #7D7C7F;
 line-height: 50px;
 border: 2px solid #7D7C7F;
 background-color: transparent;
}
.banner .sendMassage button:hover{
 border: 2px solid #07cbc9;
 background-color: transparent;
}

aboutCss.css代码如下：

.about{
 position: absolute;
 top:705px;
 width: 100%;
 /*height: 800px;*/
 /*background-color: cyan;*/
}
.about .about_top{
 padding-top: 20px;
 margin: 0 auto;
 width: 500px;
 height: 100px;
 background-color: #FFFFFF;
 text-align: center;
}
.about .about_top .title{
 font-family: "微软雅黑" 
 font-size: 25px;
 font-weight: bold;
}
.about .about_top .line{
 background-color: #07CBC9;
 display: block;
 width: 15px;
 height: 2px;
 margin: 3px auto;
}
.about .about_top .description{
 font-family: "微软雅黑";
 font-size: 15px;
 color: #7D7F7C;
}
.about .about_middle{
 margin: 0 auto;
 padding-top: 20px;
 width: 1000px;
 /*height: 250px;*/
 background-color: cyan;
}
.about .about_middle .left{
 /*position: absolute;*/
 /*position: relative;*/
 top: 0px;
 left: 0px;
 width: 250px;
 z-index: 20;
}
.about .about_middle .left .word1{
 font-family: "微软雅黑";
 font-size: 30px;
}
.about .about_middle .left .word2{
 padding: 20px;
 background-color: rgba(255,255,255,0.2);
 font-family: "微软雅黑"
 font-size: 15px;
 border: 1px solid #7D7F7C;
}
.about .about_middle .left .word2 button{
 margin-top: 10px;
 padding: 15px;
 background-color: #000;
 font-size: 20px;
 color: #FFF;
 border: 0px;
}
.about .about_middle .center{
 /*position: absolute;*/
 /*position: relative;*/
 top: 0px;
 left: 190px;
 z-index: 10;
}
.about .about_middle .center img{
 width: 600px;
 height: 400px;
}
.about .about_middle .right{
 /*position: absolute;*/
 /*position: relative;*/
 top: 0px;
 right: 0px;
 width: 120px;
 height: 100px;
 background-color: #000
}

当我对 about区域中间部分的 左、中、右三部分都设置绝对定位后三部分是相对与整个about部分的DIV进行分布的。

当不设置定位方式时，三部分就就会在about区域中间部分的DIV进行文档流布局。

是什么原因造成的？
懒人13 2019-05-26
源自：网页布局案例   2-9 作业题
3
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
提问者 懒人13 2019-05-27 14:53:01

其它代码均未修改，仅aboutCss.css代码修改如下：

.about{
 position: absolute;
 top:705px;
 width: 100%;
 /*height: 800px;*/
 /*background-color: cyan;*/
}
.about .about_top{
 padding-top: 20px;
 margin: 0 auto;
 width: 500px;
 height: 100px;
 background-color: #FFFFFF;
 text-align: center;
}
.about .about_top .title{
 font-family: "微软雅黑" 
 font-size: 25px;
 font-weight: bold;
}
.about .about_top .line{
 background-color: #07CBC9;
 display: block;
 width: 15px;
 height: 2px;
 margin: 3px auto;
}
.about .about_top .description{
 font-family: "微软雅黑";
 font-size: 15px;
 color: #7D7F7C;
}
.about .about_middle{
 position: relative;
 margin: 0 auto;
 padding-top: 20px;
 width: 1000px;
 /*height: 250px;*/
 background-color: cyan;
}
.about .about_middle .left{
 position: absolute;
/* position: relative;*/
 top: 0px;
 left: 0px;
 width: 250px;
 z-index: 20;
}
.about .about_middle .left .word1{
 font-family: "微软雅黑";
 font-size: 30px;
}
.about .about_middle .left .word2{
 padding: 20px;
 background-color: rgba(255,255,255,0.2);
 font-family: "微软雅黑"
 font-size: 15px;
 border: 1px solid #7D7F7C;
}
.about .about_middle .left .word2 button{
 margin-top: 10px;
 padding: 15px;
 background-color: #000;
 font-size: 20px;
 color: #FFF;
 border: 0px;
}
.about .about_middle .center{
 position: absolute;
 /*position: relative;*/
 top: 0px;
 left: 190px;
 z-index: 10;
}
.about .about_middle .center img{
 width: 600px;
 height: 400px;
}
.about .about_middle .right{
 position: absolute;
 /*position: relative;*/
 top: 0px;
 right: 0px;
 width: 120px;
 height: 100px;
 background-color: #000
}


0
收起回答
  • 好帮手慕柯南 #1
    同学你好！是因为父元素出现了塌陷呢，铜须额可以给父元素一个固定的高度来解决这个问题呢。祝学习愉快~
    2019-05-27 15:36:47
好帮手慕柯南 2019-05-27 10:54:09

同学你好！在css中给某个盒子设置了定位，他就会脱离文档流，他的定位会以最近的定位的父元素为基准进行定位。所以出现了同学描述的问题。如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

0
收起回答
  • 提问者 懒人13 #1
    对着三个div的父级div设置了相对定位后，这是哪个子div可以达到预期的排布，但是父级div的高度不会自动撑开是怎么回事？崩溃？破坏？
    2019-05-27 11:50:24
  • 提问者 懒人13 #2
    还是说因为父级div设置了margin： 0 auto；的原因？
    2019-05-27 11:52:38
  • 好帮手慕柯南 回复 提问者 懒人13 #3
    同学的代码是没有问题的呢，同学接下来是需要对三个小的div相对父元素进行定位的将其放在相应的位置呢，同学是改了代码之后出现了父级div的高度不会自动撑开吗？如果是的话同学贴一下最新的代码。注意不要贴在回复里，会改变代码的格式呢，助学习愉快~
    2019-05-27 13:38:12
点开查看后面1条评论
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

about区域中间还是做不出来
4 0 3
圣杯布局中的float和margin-left
37 0 6
作业问题，在线等。ABOUT区的中间部分我打算用双飞翼布局，但是左边部分会消失
34 0 3
老师能讲解一下，这个案例，一些布局的技巧吗？我自己写 了，感觉好乱。。。。。懵了。
1 0 5
about区域的定位在不同显示器下差距很大
43 0 3

登录后可查看更多问答，登录/注册

从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师