首頁猿問為什么中間的div總是擠掉右邊的div

為什么中間的div總是擠掉右邊的div

CSS3 Html5

慕婉清0895596 2017-09-05 15:46:28

<!DOCTYPE html><html><head>? <meta charset="UTF-8">? <title></title>? <style type="text/css">? ? /*標(biāo)簽樣式區(qū)*/? ? *{? ? ? ? margin:0;? ? ? ? padding:0;? ? ? ? font-size:16px;? ? ? ? font-family:"roman";? ? }? ? a{? ? ? ? color:#fff;? ? ? ? text-decoration:none;? ? }? ? ul{list-style: none;}? ?/* 頁面導(dǎo)航樣式s*/? ? .nav{? ? ? ? width:100%;? ? ? ? height:50px;? ? ? ? background:#333;? ? }? ? .logo{? ? ? ? height:50px;? ? ? ? width:auto;? ? ? ? float:left;? ? }? ? .logo img{? ? ? ? height:50px;? ? }? ? .nav_ul{? ? ? ? height:50px;? ? ? ? float:right;? ? ? ? line-height:50px;? ? }? ? .nav_li{? ? ? ? height:50px;? ? ? ? float:left;? ? ? ? padding-right:10px;? ? ? ? margin-left:10px;? ? }? ? /*頁面內(nèi)容樣式區(qū)*/? ? .container{? ? ? height:1000px;? ? }? ? .left{? ? ? float: left;? ? ? width:35%;? ? ? height:1000px;? ? ? background-color: blue;? ? }? ? .right{? ? ? float:right;? ? ? width: 20%;? ? ? height:1000px;? ? ? background-color: green;? ? }? ? .clear{? ? ? clear: both;? ? }? ? /*頁腳樣式區(qū)*/? ? .footer{? ? ? background-color: #333;? ? ? width: 100%;? ? ? height:50px;? ? }? ? .footer_ul{? ? ? max-width: 600px;? ? ? height:50px;? ? ? line-height: 50px;? ? ? margin:0 auto;? ? }? ? .footer_li{? ? ? float: left;? ? ? height:50px;? ? ? line-height: 50px;? ? ? padding:0 15px;? ? }? </style></head><body>?? <div class="nav">? ? ? <div class="logo">? ? ? ? ? <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="" title=""/>? ? ? </div>? ? ? <ul class="nav_ul">? ? ? ? ? <li class="nav_li"><a href="#">課程實戰(zhàn)</a></li>? ? ? ? ? <li class="nav_li"><a href="#">職業(yè)路徑</a></li>? ? ? ? ? <li class="nav_li"><a href="#">實戰(zhàn)</a></li>? ? ? ? ? <li class="nav_li"><a href="#">猿問</a></li>? ? ? ? ? <li class="nav_li"><a href="#">手記</a></li>? ? ? </ul>? </div>? <div class="container">? <div class="left">left</div>? <div class="mid">mid</div>? <div class="right">right</div>? <div class="clear"></div></div>?? <div class="footer">? ? ? <ul class="footer_ul">? ? ? ? <li class="footer_li"><a href="#">網(wǎng)站首頁</a></li>? ? ? ? <li class="footer_li"><a href="#">企業(yè)合作</a></li>? ? ? ? <li class="footer_li"><a href="#">人才招聘</a></li>? ? ? ? <li class="footer_li"><a href="#">聯(lián)系我們</a></li>? ? ? ? <li class="footer_li"><a href="#">常見問題</a></li>? ? ? ? <li class="footer_li"><a href="#">友情鏈接</a></li>? ? ? </ul>? </div></body></html>

查看完整描述