wrap设置了width=1000px,main却显示了100%

来源:3-10 企业网站制作之新闻中心制作(一)

也许还十年0

2016-08-06 11:58

<div class="wrap">
   <div class="logo">
       <div class="logo_left">
           <img src="img/logo.jpg" alt="慕课网"/>
       </div>
       <div class="logo_right">
           <img src="img/tel.jpg" alt="服务热线"/>24小时服务热线:<span class="tel">123-456-7890</span>
       </div>
   </div>
   <div class="nav">
       <div class="nav_left"></div>
       <div class="nav_middle">
           <div class="nav_middle_left">
               <ul>
                   <li><a href="#">首页</a></li>
                   <li><a href="list.html">关于慕课</a></li>
                   <li><a href="list.html">新闻动态</a></li>
                   <li><a href="list.html">课程中心</a></li>
                   <li><a href="list.html">在线课程</a></li>
                   <li><a href="list.html">人才招聘</a></li>
               </ul>
           </div>
           <div class="nav_middle_right">
               <form action="" method="post">
                   <input type="text" class="search_text"/>
               </form>
           </div>
       </div>
       <div class="nav_right"></div>
   </div>
   <div class="ad" id="picBox">
       <div class="pic">
       <ul>
           <li><img src="img/ad2.jpg"/></li>
           <li><img src="img/ad3.jpg"/></li>
           <li><img src="img/ad4.jpg"/></li>
       </ul>
       </div>
   </div>
   <div class="main">
       <div class="news">
           <div class="title">
               <h2 class="title_left">新闻中心</h2><span class="title_right"><a href="news.html">More&gt;&gt;</a></span>
           </div>
           <div class="pic_news">
               <img src="img/news.jpg"/><h2>520慕女神喊你来表白</h2>
               <p>活动时间:5月20日-5月25日<br/>获奖公布时间:5月26日<br/></p>
           </div>
           <div class="news_list">
               <ul>
                   <li><a href="news.html">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2016-01-01</span></li>
                   <li><a href="news/html">【有奖活动】给父亲的三行书信</a><span>2016-01-02</span></li>
                   <li><a href="news.html">【程序猿,请晒出你的童年】活动获奖公告</a><span>2016-05-02</span></li>
                   <li><a href="news.html">【慕课访谈】破茧成蝶-美女程序员的蜕变史</a><span>2016=08-09</span></li>
               </ul>



           </div>
       </div>
       <div class="course"></div>
       <div class="sidebar"></div>
   </div>
</div>

想请问下大家,wrap作为一个外层盒子将其他都包裹并且也设置过width=1000px了,为什么在html里写了main之后,我打开浏览器发现宽度居然占据了100%,logo和nav区域是正常的,没有再单独设置就显示了wrap的1000px。

写回答 关注

2回答

  • 慕盖茨4878874
    2016-08-06 16:29:23

    嗯,我拿你代码试了下,没有出现这种问题呀,就是占据wrap的100%,不会出现你说的占据整个页面的100%。

  • 慕盖茨4878874
    2016-08-06 14:00:11

    main的宽度占据wrap的宽度的100%那是肯定的呀。就像你随便设置一个块级标签,没有设置块级标签的宽度,也没有设置包裹层宽度,它都是默认占据了页面宽度的100%。

    也许还十年0

    我是说意外的结果是占据页面的100%,而不是wrap的%.main是被wrap包裹的,wrap已经设置了1000px,那正常情况下main不是也应该是1000px么,我所纠结的是它怎么会显示的是占满整个浏览器,也就是100%,不知道我有没有说清楚

    2016-08-06 14:39:44

    共 1 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题