宽度自适应两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>宽度自适应两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:41px;
background:blue;
}
.main-left{
10%;
height:800px;
background:red;
float:left;
}
.main-right{
90%;
height:800px;
background:pink;
float:right;
}
#footer{
clear:both;
height:50px;
background:gray;
}
ul{
list-style-type:none;
background-color:#333;
overflow:hidden;
}
li{
float:left;
}
li a, .dropbtn{
display:inline-block;
color:white;
text-align:center;
padding:10px 8px;
text-decoration:none;
font-family:华文新魏;
font-size:18px;
}
li a:hover, .dropdown:hover .dropbtn{
background-color:#111;
}
.dropdown{
display:inline-block;
}
.dropdown-content{
min-140px;
background-color:#FFE4C4;
position:absolute;
display:none;
box-shadow:0px 4px 6px 0px rgba(0,0,0,0.2);
font-family:华文新魏;
}
.dropdown-content a{
color:black;
padding:4px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{
background-color:#F1F1F1;
}
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</head>
<body>
<div id="herder">
<div class="dropdown">
<a href="#" class="dropbtn">网址大全</a>
<div class="dropdown-content">
<a href="http://www.baidu.com">百度首页</a>
<a href="http://www.qq.com">腾讯QQ</a>
<a href="http://www.msn.com.cn">MSN</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">业务管理</a>
<div class="dropdown-content">
<a href="http://www.baidu.com">百度首页</a>
<a href="http://www.qq.com">腾讯QQ</a>
<a href="http://www.msn.com.cn">MSN</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">信息中心</a>
<div class="dropdown-content">
<a href="http://www.baidu.com">百度首页</a>
<a href="http://www.qq.com">腾讯QQ</a>
<a href="http://www.msn.com.cn">MSN</a>
</div>
</div>
</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer111">页脚</div>
</body>
</html>
左列
右列