三列可變寬度CSS頁面布局，右列擴展

Question

我無法使以下三列布局正常工作：

    A              B              C
+-------+-----------+-------------------------+
|       |           |                         |
| Fixed |   Fixed   |  Expands to fill width  |
|       |           |                         |
+-------+-----------+-------------------------+

哪里：

• A是固定寬度。
• B是固定寬度。
• C包含我想填充頁面上剩余空間的內容。 頁面本身具有可調整的寬度

我已經找到了許多解決方案，其中中心柱是流體，但是我很難使右柱成為流體寬度，而左柱和中柱具有固定寬度，而右柱在擴展時不會斷線。 右列中的內容主要是文本，而左列和中間列是圖像。

這是我用來測試的小提琴，它具有所有設置： http : //jsfiddle.net/7y7Lmvr9/2/

Answer 1

CSS calc()可能是解決方案之一。

演示-http://jsfiddle.net/7y7Lmvr9/3/

#div_left, #div_middle, #div_right {
    border: 1px solid red;
    box-sizing: border-box;
    float:left;
}
#div_left, #div_middle {
    width: 100px;
}
#div_right {
    width: calc(100% - 200px);
}

Bowser兼容性-http: //caniuse.com/#feat=calc

Answer 2

您可以拋開浮子並使用display:table-cell代替：

 $('#div_right').click(function () { $(this).append('-------'); }); 

 #div_left { display:table-cell; border:1px solid #F00; width: 100px; } #div_middle { display:table-cell; border:1px solid #0F0; width: 100px; } #div_right { display:table-cell; border:1px solid #00F; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='div_left'>Fixed width</div> <div id='div_middle'>Fixed Width</div> <div id='div_right'>Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 

Answer 3

display:table已經說過了，所以我只說flex :)

 body { display:flex; } body>div { border:solid; width:100px; } #div_right { flex:1; width:auto; } 

  <div id='div_left'> Fixed width </div> <div id='div_middle'> Fixed Width </div> <div id='div_right'> Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> 

Answer 4

我建議將三個div包裝到另一個div中，並將包裝器顯示設置為“ flex”。 這樣，您可以設置前兩個div的寬度，並設置第三個div來填充剩余的空間。 http://jsfiddle.net/6LgkjpwL/在包裝器上進行了Flex修飾。 關於flex的大量資源-https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

body{
 font-weight:bold;   

}

#wrapper{
    display:flex;
    flex-direction: row;

}
#div_left{
    order: 1;
    overflow: hidden;
    border:1px solid #F00;
    width: 100px
}
#div_middle {
   order: 2;
    overflow: hidden;
    border:1px solid #0F0;
    width: 100px
}
#div_right {
    order:3;
    flex:1;
    border:1px solid #00F;
}

Answer 5

    <div style="width:100%; overflow:hidden">       

<div id='div_left'>
           Fixed width
        </div>
        <div id='div_middle'>
            Fixed Width
        </div>
        <div id='div_right'>
             Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

</div>

---

body{
 font-weight:bold;   
}
#div_left{
    float:left;
    overflow: hidden;
    border:1px solid #F00;
    width: 9%
}
#div_middle {
    float:left;
    overflow: hidden;
    border:1px solid #0F0;
    width: 9%
}
#div_right {
    float:left;
    border:1px solid #00F;
    width: 79%
}