css - 三列可变宽度 CSS 页面布局，右列展开

Question

我在使用以下三列布局时遇到问题:

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

地点:

• A 是固定宽度。
• B 为固定宽度。
• C 包含我想填充页面剩余空间的内容。具有可调整宽度的页面本身

我发现了很多中间列是流动的解决方案，但是我很难让右列成为流动宽度，左列和中间列具有固定宽度，而右列在扩展时没有换行符更大。右栏中的内容主要是文本，而左栏和中间栏中的内容是图像。

这是我一直用于测试的 fiddle ，它具有所有设置:http://jsfiddle.net/7y7Lmvr9/2/

Answer 1

您可以放弃 float 并改用 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>