墨瑶曦羽 2022-08-24 14:48 采纳率: 85.7%
浏览 30
已结题

前端postion定位问题

在页面中以标准流的形式添加两个盒子，第一个盒子设置宽度和高度，第一个盒子包括内容极其盒子加上定位，为什么第二个盒子设置width:100％呈现的页面效果不是width：100％，而是与第一个盒子同一个宽度。

<!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>
    
    <link rel="stylesheet" href="../css/style.css" />
    
    <link rel="stylesheet" href="../css/fourth.css" />
    
    <link rel="stylesheet" href="../font/iconfont.css" />
    
    <script src="../font/iconfont.js"></script>
  </head>
  <body>
    <header>
      <div class="nav">
        
        <div class="logo">
          <img src="../images/logo.png" alt="" />
        </div>
        <nav>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">故乡历史</a></li>
            <li><a href="#">故乡风俗</a></li>
            <li><a href="#">故乡报刊</a></li>
            <li><a href="#">故乡建筑</a></li>
            <li><a href="#">故乡美食</a></li>
            <li><a href="#">访客留言</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="img">
      <img src="../images/banner.jpg" alt="" />
    </div>
    <div class="line">故乡报刊</div>
    <div class="center">
      <img src="../images/magazine.jpg" alt="" />
      <div class="text_magazine">
        <p>
          《读者》杂志发行量从创刊时月发行量3万册，到2006年月平均发行量898万册，稳居中国期刊排名第一，亚洲期刊排名第一，世界综合性期刊排名第四。同时，《读者》杂志行销世界90多个国家和地区，在美国、日本、澳大利亚、新加坡等国家和香港等地区拥有众多读者。可以说，有华人的地方就有《读者》。《读者》被誉为“中国人的心灵读本”“中国期刊第一品牌”。
        </p>
        <p>
          《读者》杂志创办于1981年，原名《读者文摘》。1982年初，美国《读者文摘》来函指出：甘肃人民出版社使用《读者文摘》中文名是不正当的，不符合国际权协定。中美两家《读者文摘》长达数年的版权之争从此开始。后为化解与美国《读者文摘》发生的版权纠纷，1993年3月号《读者文摘》刊登征名启事，在读者中引起强烈反响，最后采用“读者”一名。1993年第7期，《读者文摘》正式改名为《读者》。
        </p>
        <span> <a href="http://www.baidu.com" target="_blank">More</a></span>
      </div>
      <div class="column">
        <h3>主要栏目</h3>
        <p>文苑：卷首语、文苑、书林一叶、幽默小品、原创精品</p>
        <p>人物：人物、名人轶事</p>
        <p>社会：杂谈随感、话题</p>
        <p>生活：心理人生、经营之道、理财</p>
        <p>文明：在海外、他山石、历史一叶、文化茶座、人与自然、影像</p>
        <p>家园：人与自然、生物世界</p>
        <p>点滴：言论、漫画与幽默、意林、点滴</p>
        <p>互动：智趣、读者•作者•编者</p>
        <p>艺术：封面、美术插页、歌曲</p>
      </div>
    </div>
    <div class="section">
      <div class="section_text">
        <h2>读者</h2>
        <ul>
          <li>
            <div class="icon-x">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-baokanzazhi"></use>
              </svg>
            </div>
            <h3>办刊宗旨</h3>
            <div class="icon_text">
              <p>博采中外</p>
              <p>荟萃精华</p>
              <p>启迪思想</p>
              <p>开阔眼界</p>
            </div>
          </li>
          <li>
            <div class="icon-x">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-baokanzazhi"></use>
              </svg>
            </div>
            <h3>办刊理念</h3>
            <div class="icon_text">
              <p>高雅</p>
              <p>清新</p>
              <p>隽永</p>
            </div>
          </li>
          <li>
            <div class="icon-x">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-geren"></use>
              </svg>
            </div>
            <h3>办刊对象</h3>
            <div class="icon_text">
              <p>社会各界群众</p>
              <p>青年</p>
              <p>知识界</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="line">关于读者</div>
    <div class="time">
       <div class="time-axis">
      <div class="left">
        <span class="dot"></span>
        <span class="jiantou"></span>
        <div class="con">2013年9月,获得“2013年度中国邮政发行报刊百强排行榜”第一名。</div>
      </div>
      <div class="right">
        <span class="dot"></span>
        <span class="jiantou"></span>
         <div class="con">2015年,获得“最受海外机构用户青睐的中国期刊发行排行”第一名。</div>
      </div>
         <div class="left">
        <span class="dot"></span>
        <span class="jiantou"></span>
        <div class="con">2018年9月,获得“2018年度中国邮政发行报刊百强排行榜”第四名。</div>
      </div>
      <div class="right">
        <span class="dot"></span>
        <span class="jiantou"></span>
         <div class="con">]2019年6月,获得“2018数字阅读影响力期刊TOP100”海外榜单第一名，中国国内榜单第二名。</div>
      </div>
    </div>
    <footer>
      <div class="footer">
        <img src="../images/logo.png" alt="">
        <ul>
          <li>
            <span class="iconfont icon-dingwei1"></span>地址：甘肃省兰州市XXX街XX大厦
          </li>
          <li>
            <span class="iconfont icon-dianhua"></span>联系方式：189XXXX8924
          </li>
          <li>
            <span class="iconfont icon-youjian"></span>邮箱：18919168924@163.com
          </li>
          <li>
            <span class="iconfont icon-fangkuang"></span>Copyright© 2022 GaoXupeng. All rights
          </li>
        </ul>
      </div>
       <div class="return">
        <nav>
            <p>
                <a href="#">首页</a><em>|</em>
                <a href="#">故乡历史</a><em>|</em>
                <a href="#">故乡资源</a><em>|</em>
                <a href="#">故乡风俗</a><em>|</em>
                <a href="#">故乡报刊</a><em>|</em>
                <a href="#">故乡建筑</a><em>|</em>
                <a href="#">故乡美食</a>
            </p>
        </nav>
      </div>
    </footer>
  </body>
</html>



.img {
    /* margin: 0 auto; */
    width: 1519px;
    height: 648px;
    background-color: #b1bbf9;
}

.img img {
    width: 1519px;
    height: 648px;
}

.line {
    padding: 0 20px 0;
    margin: 85px 465px;
    line-height: 1px;
    font-size: 30px;
    font-family: simsun;
    color: #3F4E61;
    text-align: center;
    border-left: 200px solid #d6dde7;
    border-right: 200px solid #d6dde7;
}

.center {
    margin: 0 auto;
    width: 1200px;
    height: 335px;
    /* background-color: orchid; */
}

.center img {
    float: left;
    margin-left: 65px;
    margin-top: 50px;
    width: 185px;
    height: 230px;
}

.center .text_magazine {
    float: left;
    margin-left: 40px;
    width: 435px;
    height: 320px;
    /* background-color: orange; */
}

.center .text_magazine span {
    display: block;
    margin-top: 12px;
    text-align: center;
    line-height: 35px;
    width: 65px;
    height: 40px;
    background-color: #9d6e51;
}

.text_magazine p {
    text-align: justify;
    font-family: simsun;
}

.center .text_magazine span a {
    color: #ffffff;
}

.center .column {
    float: left;
    margin-left: 15px;
    width: 438px;
    height: 320px;
    /* background-color: indianred; */
    border-left: 3px solid #9d6e51;
}

.center .column h3 {
    margin-left: 20px;
    font-size: 25px;
    font-family: simsun;
}

.center .column p {
    margin-bottom: 8px;
    margin-left: 20px;
    line-height: 24px;
    font-size: 14px;
    font-family: simsun;
    width: 95%;
    height: 25px;
    background-color: #9d6e51
}

.section {
    width: 100%;
    height: 400px;
    background-color: #ddd37e;
}

.section_text {
    margin: 0 auto;
    width: 1200px;
    height: 400px;
    background-color: indianred;
}

.section_text h2 {
    font-size: 35px;
    font-family: simsun;
    color: #ffffff;
    text-align: center;
    line-height: 90px;
}

.section_text ul {
    margin-left: 188px;
    margin-top: 22px;
    width: 810px;
    height: 265px;
    /* background-color: yellow; */
}

.section_text ul li {
    float: left;
    margin-left: 80px;
    width: 170px;
    height: 240px;
    /* background-color: orange; */
}

.section_text ul li .icon-x {
    margin-left: 45px;
    margin-top: 20px;
    text-align: center;
    line-height: 70px;
    font-size: 40px;
    width: 80px;
    height: 80px;
    background-color: violet;
    border-radius: 50%;
}

.section_text ul li .icon-x .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;

}

.section_text ul li h3 {
    text-align: center;
    line-height: 50px;
    font-family: simsun;
}

.icon_text {
    text-align: center;
    font-size: 16px;
    font-family: simsun;
    color: #ffffff;
    width: 170px;
    height: 86px;
    /* background-color: greenyellow; */
}
.time{
    margin: 0 auto;
    width: 1519px;
    height: 330px;
    /* background-color: #b1bbf9; */
}
.time-axis {
    width: 804px;
    height: 330px;
    /* border: 2px solid red; */
    margin: 0 auto;
}

.time-axis .left {
    position: relative;
    float: left;
    width: 400px;
    /* height: 300px; */
    /* background-color: yellowgreen; */
    border-right: 4px solid #b1bbf9;
}

.time-axis .right {
    position: relative;
    float: right;
    width: 400px;
    /* height: 300px; */
    /* background-color: cornflowerblue; */
    border-left: 4px solid #b1bbf9;
}

.time-axis .dot {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 7px;
    border: 2px solid #b1bbf9;
}

.time-axis .left .dot {
    right: -9px;
}

.time-axis .right .dot {
    left: -9px;
}

.time-axis .jiantou {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    display: block;
    border: 10px solid transparent;
}

.time-axis .left .jiantou {
    right: -1px;
    border-left: 10px solid yellow;
}

.time-axis .right .jiantou {
    left: 0px;
    border-right: 10px solid yellow;
}
.time-axis .con {
    padding: 15px;
    margin-right: 20px;
    font-size: 18px;
    font-family: simsun;
    /* height: 200px; */
    background-color: #fff;
    border-radius: 10px;
}

.time-axis .left .con {
    margin-right: 20px;
}

.time-axis .right .con {
    margin-left: 20px;
}
footer {
    width: 100%;
    height: 310px;
    background-color: #3f4e61;
}

.footer {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    height: 270px;
    /* background-color: cornflowerblue; */
}

.footer img {
    margin-top: 110px;
    width: 329px;
    height: 70px;
}

.footer ul {
    position: absolute;
    left: 420px;
    top: 82px;
    color: #fff;
    font-family: simsun;
    width: 350px;
    /* background-color: #ddd37e; */
}

.footer ul li {
    float: left;
    height: 35px;
}

.footer span {
    display: block;
    float: left;
    padding: 0 8px 0 0;
}

.return {
    height: 50px;
    background-color: #26395b;
}

.return nav {
    margin: 0 auto;
    width: 1200px;
    height: 50px;
}

.return p {
    line-height: 50px;
    text-align: center;
    height: 50px;
}

.return p a {
    padding: 0 0 0 20px;
    font-size: 15px;
    font-family: simsun;
    color: #fff;

}

.return p em {
    font-style: normal;
    margin-left: 15px;
    color: #fff;

}

.return p a:hover {
    color: #ddd37e;
}
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/497374323166130.png "#left")
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-08-24 15:08
    关注

    time的div标签没闭合，导致footer变为div这个time的子元素了

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 9月1日
  • 已采纳回答 8月24日
  • 创建了问题 8月24日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来