CSS如何實現」右部寬度固定，左部自適應「的佈局

時間 2019-11-08

標籤 css 如何實現寬度固定自適應佈局欄目 CSS 简体版

原文原文鏈接

吃過晚飯後，開始刷前端筆試題，卻遇到了一道CSS難題——使用CSS實現左部自適應、右部固定寬度爲200px的佈局。當時第一眼看到題目時，覺得只是一道很簡單的題目。不就是定義兩個左浮動的div，右部的寬度固定爲200px，左部的寬度爲100%，可是真的是那麼簡單嗎？我當時信心十足的覺得真的就是這麼簡單的！看來，自信真的是來源於無知啊！因而立刻切換到sublime開始編碼了。當時，寫好的第一個版本大概以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index20</title>
    <style>
    
        /*reset default style*/
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            border: 2px solid green;
            height: 320px;
            width: 100%; /*寬度爲100%*/
            float: left; /*左浮動，使其脫離文檔流*/
        }

        .right {
            border: 2px solid blue;
            height: 320px;
            width: 200px; /*固定寬度200px*/
            float: left; /*左浮動，使其脫離文檔流*/
            margin-left: -210px; /*設置margin-left爲負數，能夠和左部div在一行*/
        }
    </style>

</head>
<body>
    <div class="left">
        Hi I on at the left side!
    </div>
    <div class="right">  
        Hi, I on the right  side!        
    </div>
</body>
</html>

在chrome瀏覽了一下，效果以下：前端

乍一看，上面的效果好像已經達到了咱們的題目要求了。可是，接下bug就開始暴露出來了！就在我爲本身完成了任務而高興時，就打開新浪新聞放鬆一下。手賤的我，看完了一條關於谷歌alphago完爆韓國頂級棋手小李的新聞時，而後隨便複製了下來，放到left裏面，這時候，我開始慌了，效果以下:chrome

Oh,個人天吶！左部的內容居然溢出了並且還跑到了右部去了！本覺得本身的佈局已經達到了十全十美的了，如今問題卻忽然暴露出來了。心好累啊！ide

然而，心累有個卵用啊。既然bug都已經暴露了，那就老老實實的debug吧！佈局

靜靜的的發呆了數分鐘，總算明白了，bug題的根源在於我給左部的元素設置了寬度爲100%了，這個100%並非整個可視區域減去右部元素以後的100%，而是直接就是整個可視區域的100%了！因此，它就理所固然的會佈滿整個可視區域的了！可是，若是，我不用100%的話，那還有什麼辦法啊？編碼

這下，可真的把我難倒了！此刻失落的心情應該和韓國小李有的一比！idea

可是，我並無這樣就認輸了！後來，嘗試試了很久，總算髮現了一種可行的解決方案了：在左部元素裏面再添加加一個div，而它纔是真正的自適應寬度的div，讓它的margin-right大約等於右部div的寬度（200）加上左右邊框（border）的寬度。代碼以下：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index20</title>
    <style>
    
        /*reset default style*/
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            border: 2px solid green;
            height: 320px;
            width: 100%; /*寬度爲100%*/
            float: left; /*左浮動，使其脫離文檔流*/
        }

        .right {
            border: 2px solid blue;
            height: 320px;
            width: 200px; /*固定寬度200px*/
            float: left; /*左浮動，使其脫離文檔流*/
            margin-left: -210px; /*設置margin-left爲負數，能夠和左部div在一行*/
        }

        .content {
            /*使這個真正的自適應寬度的div右邊距大約等於右部div的盒模型寬度*/
            margin-right: 210px; 
        }
    </style>

</head>
<body>
    <div class="left">
        <div class="content">
            這裏面是一大串的文字......
        </div>
      
    </div>
    <div class="right">  
        Hi, I on the right  side!        
    </div>
</body>
</html>

這時候的效果以下：debug

可是，那個綠色邊框跟藍色邊框連在了一塊兒，不是很好看，因此，應該把邊框設置在.content元素，而不是.left，以下：3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index20</title>
    <style>
    
        /*reset default style*/
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            height: 320px;
            width: 100%; /*寬度爲100%*/
            float: left; /*左浮動，使其脫離文檔流*/
        }

        .right {
            border: 2px solid blue;
            height: 320px;
            width: 200px; /*固定寬度200px*/
            float: left; /*左浮動，使其脫離文檔流*/
            margin-left: -210px; /*設置margin-left爲負數，能夠和左部div在一行*/
        }

        .content {
            /*使這個真正的自適應寬度的div右邊距大約等於右部div的盒模型寬度*/
            margin-right: 210px; 
            border: 2px solid green;
        }
    </style>

</head>
<body>
    <div class="left">
        <div class="content">
            這裏面是一大串的文字......
        </div>
      
    </div>
    <div class="right">  
        Hi, I on the right  side!        
    </div>
</body>
</html>