右侧固定宽度，左侧自适应屏幕的布局（笔试题）

    看到一些布局中一边固定宽度，另一边自适应屏幕的问题。总结了两种方法，一种是绝对定位，一种是浮动。

    1、绝对定位方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
header{
    background-color:#09F;    
    height:50px;
}
main{
    position:relative;
    height:400px;        /*关键点1，添加高度，防止左右两侧高度不相等时候，footer上移问题*/
}
#left{
    margin-right:200px;   /*关键点2*/
    height:300px;
    background-color:#066;
}
#right{
    width:200px;
    height:400px;
    background-color:#CCC;
    position:absolute;
    top:0;
    right:0;
}
footer{
    height:50px;
    background-color:#096;}
</style>
</head>

<body>
<header>头部</header>
<main>
    <div id="left">左侧区域</div>
    <div id="right">右侧区域</div>
</main>
<footer>尾部</footer>
</body>
</html>

    2、浮动方法

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>左栏固定宽度，右栏自适应之绝对定位法</title>
<style type="text/css">
header{
    height:50px;
    background-color:#3FF;
}
#left{
    height:300px;
    background-color:#9F3;
}
#right{
    float: right;
    width: 230px;
    height: 400px;
    background: #ccc;
}
footer{
    clear:both;      /*关键点1*/
    height:50px;
    background-color:#3FF;
}
</style>
</head>
<body>
    <header>头部</header>
    <main> 
        <div id="right">右侧区域</div>
        <div id="left">左侧区域</div>    /*关键点2，*位置的顺序很重要，如果调换左侧区域和右侧区域的顺序，则右侧区域浮动时，没有漂到left的右侧，而是在left下方的右侧*/
    </main>
    <footer>尾部</footer>
</body>
</html>

    一定要注意DOM的顺序。

   

posted @ 2015-10-15 10:40  若鱼灬  阅读(358)  评论(0)  编辑  收藏  举报