佈局之左側固定，右側自適應

時間 2019-11-05

標籤佈局左側固定右側自適應欄目 CSS 简体版

原文原文鏈接

(此文爲轉載，還有三個不經常使用方法在連接https://blog.csdn.net/betty13006159467/article/details/79959149)css

1，固定側左浮動，右側設置marginhtml

給左邊的固定寬度區left浮動並設置一個寬度，右邊的自適應區right只設置margin值，假設right的寬度是100%，那麼設置margin後，它得寬度就變爲100%-margin；left發現本身的寬度能夠和right擠在同一行，它就浮動上來了ide

#main{
                overflow:hidden;/*清除浮動*/
            }
            #left{
                float:left;
                width:300px;
                background:red;
            }
             #right{
                margin-left:310px;
                background:#666;
           }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>寬度自適應</title>
    </head>
    <body>
        <div id="main">
            <!--這種方法必須把固定寬度區寫在前面，不然佈局不了-->
            <div id="left" style="height:400px;">content我是固定寬度區</div>
            <div id="right" style="height:300px;">sider我是自適應區</div>

        </div>
        <div id="footer">footer</div>

記得清除浮動，這樣無論left和right誰更長，footer都不會錯位，不會對佈局形成影響；
可是，這種方法必須讓固定寬度區寫在自適應區前面。佈局

2,固定寬度區使用絕對定位，自適應區設置marginui

若想把自適應區right寫在前面，給right設置margin值，須要給left固定寬度區設置絕對定位，在此以前把父元素main設置爲相對定位relative，讓left的絕對定位是相對於main而不是相對於整個網頁。.net

<head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            div{
                margin:0;
                padding:0;
            }
            #main{
                position:relative;
            }

            #left{
                position:absolute;
                top:0;
                left:0;
                width:300px;
                background:red;
            }
              #right{
                margin-left:310px;
                background:green;
           }

            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>寬度自適應</title>
    </head>
    <body>
        <div id="main">
            <div id="right" style="height:300px;">right我是自適應區</div>
            <div id="left" style="height:400px;">left我是固定寬度區</div>
        </div>
        <div id="footer">footer</div>
    </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。