CSS浮动div占用剩余宽度

Question

我似乎无法完成这项工作，现在正在考虑使用表格。

我有一个包含3个主要div的页面，它们都在同一行（浮动）。 我希望中间的div（#pages）占用剩余的宽度，因为我可以切换（）两个边div。

看起来像是：

jsfiddle here：http://jsfiddle.net/5n3rz/

这是我的代码：

<div id="project">
      <ul>
        <li>z</li>
        <li>z</li>
        <li>z</li>
        <li>z</li>
        <li>z</li>
        <li>z</li>    
      </ul>
</div>

<div class="minus">
    <a href="#" class="close close_project">
        <i class="fa fa-caret-left"></i>
      </a>
</div>

<div id="pages">
      <textarea name="text" id="texta-pages" placeholder="your page"></textarea>
</div>

<div class="minus">
      <a href="#" class="close close_notes">
        <i class="fa fa-caret-right"></i>
      </a>
</div>

<div id="notes">
      <textarea name="notes" id="texta-notes" placeholder="your notes"></textarea>
</div>

这是我目前的CSS：

一切都是身高：100％

#project, .minus, #pages, #notes{
 height:100%;
 float:left;
}
#project{
 width:150px;
}
.minus{
 background-color:#CCC;
 width:20px;
}
#pages{
 min-width:calc((100% - 2*20px - 150px)/2);
}
#notes{
 width:calc((100% - 2*20px - 150px)/2);
}

我使用jQuery来切换左边的项目，以及右边的注释。 我希望#pages部分在我删除其中一个或两个div时占用所有剩余的宽度。

Answer 1

您可以使用CSS表来执行此操作。

<小时/> 修改 因此，您需要修改以使其工作：

<强> FIDDLE

main{
    height:90%;
    display: table; /* added */
    table-layout: fixed; /* added */
    width: 100%; /* added */
}
#project, .minus, #pages, #notes{
    height:100%;
    display: table-cell; /* added; removed float:left */
}

#project{
    width:50%; /* modified width */
}

#pages{
    width: 100%; /* modified width */
}
#notes{
    width:50%; /* modified width */
}

<小时/> 这是一个（简化）示例：

<强> FIDDLE

在此示例中，您可以验证当删除第一列或第三列（或两者）时 - 中间列填满剩余空间。 （右键单击inspect元素，然后选择'删除节点'以删除col1或col3）

这里的技巧是给col2一个值width:100%

标记：

<div class="container">
    <div class="col col1">div1</div>
    <div class="col col2">div2</div>
    <div class="col col3">div3</div>
</div>

CSS

.container
{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.col
{
    display: table-cell;    
}

.col1
{
    background: pink;
    width: 20%;
}
.col2
{
    background: orange;
    width: 100%;
}
.col3
{
    background: brown;
    width: 30%;
}

Answer 2

不要向左移#page并为其赋予overflow:hidden属性：

#project, .minus, #notes {
    height:100%;
    float:left;
}

#pages {
    overflow:hidden;
}

如果块元素与浮动元素在同一行，则可以将溢出样式设置为隐藏，它将占用其父元素的剩余可用宽度。

JSFiddle