问答详情
源自:3-10 企业网站制作之新闻中心制作(一)

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

<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。

提问者:也许还十年0 2016-08-06 11:58

个回答

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

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

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

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