DIV+CSS佈局問題：一個寬度不肯定的DIV裏面放三個水平對齊的DIV，左右兩個DIV寬度固定爲150px，中間那個DIV充滿剩餘的寬度

時間 2019-12-01

標籤 div+css div css 佈局問題一個寬度肯定裏面三個水平對齊左右兩個固定 150px 中間那個充滿剩餘欄目 HTML 简体版

原文原文鏈接

　　一個入門的DIV+CSS佈局問題：一個寬度不肯定的DIV裏面放三個水平對齊的DIV，左右兩個DIV寬度固定爲150px，中間那個DIV充滿剩餘的寬度。

　　說明：代碼非真實狀況下使用，因此直接簡單。css

　　沒耐心的直接看最後解答。html

　　1. 個人第一反應：

<div style="width:500px;">
        <div id="px1" style="float:left; height:100px; width:150px; background-color:gray;"></div>
        <div id="px2" style="float:left; height:100px; width:auto; background-color:red;"></div>
        <div id="px3" style="float:left; height:100px; width:150px; background-color:green;"></div>
    </div>

　　而後發現不對，中間紅色的div根本就沒有顯示：瀏覽器

圖1佈局

　　2. 百度看到一個CSDN問答，4樓的答案以下：

這是比較典型的一個三欄佈局給你思路吧
左右兩個能夠用絕對定位讓他們分別left:0;和right:0;
而後中間的元素不定寬度讓他們的margin-left和margin-right分別對應左右兩欄的寬度就行了spa

　　修改後：.net

    <div style="width:500px;" >
        <div id="px1" style="position:absolute; left:0px;top:0px;height:100px; width:150px; background-color:gray;"></div>
        <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;"></div>
        <div id="px3" style="position:absolute; right:0px;top:0px;height:100px; width:150px; background-color:green;"></div>
    </div>

　　結果以下：（淺灰色是html頁面背景顏色）調試

圖2code

　　很明顯，這不符合預期。左右2個div的定位出現問題了，不是以父div 來定位，而是以窗口爲父元素定位了。因而我在w3cshool詳細瞭解才發現：htm

　　absolute: 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。blog

　　就是說如今左右2個div的父元素是 static 定位（static是默認的定位方式），不符合absolute的定位要求。那怎麼辦，把那個父div也改成 position: absolute （或者position: relative）唄，因而

　　3. 修改父元素爲非static定位

    <div style="width:500px;position:absolute;left:200px;top:100px;" >
        <div id="px1" style="position:absolute; left:0px;top:0px;height:100px; width:150px; background-color:gray;"></div>
        <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;"></div>
        <div id="px3" style="position:absolute; right:0px;top:0px;height:100px; width:150px; background-color:green;"></div>
    </div>

　　結果是：（淺灰色是html頁面背景顏色）

　　　　圖3

　　能夠發現：左右2個 absolue 的div元素都乖乖的沒有問題，卻是中間的紅色div 明顯變長了，突出了一部分。用Chrome調試，發現是右邊的綠色div覆蓋在了中間的紅色div上，而且紅色div總體是寬500px。

　　應該說，它的 margin-left 起做用了，可是寬度100%，卻變成了寬度500px，而且彷彿 margin-right 絲絕不起做用。

　　【後經GK同窗指導：margin-right起做用了，只是它透明瞭看不見。至於紅色超出部分能夠給父div設置屬性：overflow:hidden解決，這裏也還有問題，見5】

　　4. 去掉 margin-*

　　後來把 margin-left 去掉，發現正常了。（其實就是綠色和灰色把紅色的左右兩邊遮住了而已，其實紅色仍是500px）。

    <div style="width:500px;position:absolute;left:200px;top:100px;" >
        <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:green;"></div>
        <div id="px2" style="float:left; height:100px; width:100%; background-color:red;"></div>
        <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:gray;"></div>
    </div>

　　結果就正常了：

圖4

　　可是也就看上去正常，但感受不是符合要求，並無充滿「剩餘寬度」，而是直接充滿「所有寬帶」，而後被左右2個absolute的div遮住了左右寬度。

　　若是寫上文字，會發現（中間的div文字被遮住了）：

圖5

　　5.父div添加overflow的問題（上接3）

    <div style="width:500px;position:absolute;left:200px;top:100px;overflow:hidden" >
        <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:gray;">一二三四五六七八九十一二三四五六七八九十</div>
        <div id="px2" style="float:left; height:100px;margin-left:150px;margin-right:150px; width:100%; background-color:red;">一二三四五六七八九十一二三四五六七八九十</div>
        <div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:green;">一二三四五六七八九十一二三四五六七八九十</div>
    </div>

　　結果如圖：中間div的文字被右邊遮住了，問題只是被簡單的隱藏了。並無解決。

圖6

　　六、先貼出一個完美辦法，GK同窗的。很清晰，很明確。

<html>
<head>
<title>TEST</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .d0 {
        width: 40%;
        height: 200px;
        margin: 0 auto;
        position: relative;
        min-width: 300px;
    }
    .d1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        height: 100%;
        background-color: #CF4D4D;
    }
    .d2 {
        width: auto;
        padding: 0 150px;
        height: 100%;
        background-color: #8F8FCF;
    }
    .d3 {
        position: absolute;
        right: 0;
        top: 0;
        width: 150px;
        height: 100%;
        background-color: #62C262;
    }
</style>
</head>
<body style="background-color:#CCCCCC">
    <div class="d0">
        <div class="d1"><p>左邊的內容左邊的內容左邊的內容左邊的內容左邊的內容左邊的內容</p></div>
        <div class="d2"><p>中間的內容中間的內容中間的內容中間的內容中間的內容中間的內容</p></div>
        <div class="d3"><p>右邊的內容右邊的內容右邊的內容右邊的內容右邊的內容右邊的內容</p></div>
    </div>
</body>
</html>