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

Question

我无法使用以下三列布局：

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

其中：

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

我发现了很多中间列是流动的解决方案，但我无法让右列成为流动宽度，而左列和中间列具有固定宽度，而右列换行时它膨胀得更大。右栏中的内容主要是文本，而左栏和中间栏中的内容是图像。

这是我一直用于测试的 fiddle，其中包含所有设置：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

我建议将三个 div 包装在另一个 div 中，并将包装显示设置为 "flex." 这样您就可以设置前两个 div'宽度，并设置第三个来填充剩余的space。 http://jsfiddle.net/6LgkjpwL/ fiddle 在包装器上实现了 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 4

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 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%
}

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

Three-column variable width CSS page layout, right column expands

css

layout

multiple-columns