除了FLEXBOX之外，在網站上的單行中的兩個固定大小的物品之間放置一個可拉伸的物品還有什麼？

Question

我正在嘗試創建一個標題。我有一個帶有3個子div的父級div容器。子div 1是固定的，並將對齊到左側。子div 3是固定的，並且將對齊到右側。子div 2具有可變大小，並且適合於子1和子3之間。子2將根據瀏覽器大小（它將擴大和縮小到某一點）具有大小的變化。

我希望我的標頭能夠與舊版本的IE兼容，至少可以回到I.E.版本8.我正在閱讀有關FLEXBOXes，看起來它甚至與I.E完全不兼容。 11沒有錯誤。

我正在考慮使用表格，但想知道是否有更好的方法來做到這一點...因爲我簡單地測試了表格，它並沒有按照我的要求做。我試過了，儘管我爲每個元素指定了一個寬度，但當我縮小瀏覽器時，子1和子3的大小發生了變化 - 不是我想要的。

謝謝！

Answer 1

好，Flexbox的是專爲提供一個CSS的方式做你的描述，所以這是一個有點像問如何找到一個正方形的面積乘以無...

了flexbox我的中間人之前解決這類問題的方法是使用JavaScript來動態調整適當的div（您的案例中的第二個孩子）。即使那樣，我真的不喜歡這個解決方案，因爲我認爲JavaScript不是佈局邏輯的好地方，但它是我能想到的最好的。

我想你可以使用一個表格，但是我認爲你會在「單元格」內的佈局中遇到古怪的限制。

Answer 2

我不太清楚您嘗試使用表時遇到的問題。你能解釋一下問題是什麼？

您可以嘗試使用div和CSS來創建顯示爲表格。例如，通過這種方式，您可以使用功能查詢來查看Flexbox是否可用並使用它。如果沒有，你可以使用下面的表CSS。所有這些都不需要改變HTML。

讓我知道這是否適合你！

#container{ 
 
    display: table; 
 

 
    /* use table-layout: fixed if you're 
 
    having problems with the content expanding 
 
    the fixed cells */ 
 
    /* table-layout: fixed; */ 
 

 
    width: 100%; /* or however big you need it */ 
 
} 
 

 
    #row{ 
 
    display: table-row; 
 
    } 
 

 
    #one, 
 
    #two, 
 
    #three{ 
 
     display: table-cell; 
 
    } 
 

 
    #one{ 
 
    width: 100px; 
 
    background: blue; 
 
    } 
 
    #two{ 
 
    width: auto; 
 
    background: red; 
 
    } 
 
    #three{ 
 
    width: 100px; 
 
    background: orange; 
 
    }

<div id="container"> 
 
    <div id="row"> 
 
    <div id="one">Div 1</div> 
 
    <div id="two">Div 2</div> 
 
    <div id="three">Div 3</div> 
 
    </div> 
 
</div>

Answer 3

這裏是一個解決方案，但它有侷限性。您必須知道Child 3的寬度，並將您的父div放在相對位置。

https://jsfiddle.net/whatisthebigpicture/sj9xv9m6/1/

header { 
    position: relative; 
} 
div { 
    outline: 1px solid red; 
} 
.div1 { 
    width: 100px; 
    float: left; 
} 
.div2 { 
    margin-right: 100px; 
} 
.div3 { 
    width: 100px; 
    top: 0; 
    right: 0; 
    position: absolute; 
} 

Answer 4

與IE8可以考慮表，但這樣做的老辦法是用浮漂。

#wrapper { 
 
    overflow: hidden; /* Establish BFC */ 
 
} 
 
#child1 { 
 
    float: left; 
 
    width: 200px; 
 
    background: yellow; 
 
} 
 
#child3 { 
 
    float: right; 
 
    width: 150px; 
 
    background: pink; 
 
} 
 
#child2 { 
 
    overflow: hidden; /* Establish BFC */ 
 
    background: cyan; 
 
}

<div id="wrapper"> 
 
    <div id="child1">Child 1</div> 
 
    <div id="child3">Child 3</div> 
 
    <div id="child2">Child 2</div> 
 
</div>

要強制執行，你可以添加集max-width百分比，以#child1和#child2加起來100％一行。