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

Question

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

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

地点：

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

我找到了许多解决方案，其中中心列是流动的，但我无法让右列成为流动宽度，左列和中间列具有固定宽度，而右列在展开时没有换行符较大。右栏内容多为文字，左右两栏为图片。

这是我一直用于测试的小提琴，它已经设置了所有内容：http://jsfiddle.net/7y7Lmvr9/2/

Answer 1

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

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 3

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