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：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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的宽度，并设置第三个以填充剩余的空间。 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%
}

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

5 个答案: