CSS浮动div占用剩余宽度

Question

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

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

它看起来像这样:

jsfiddle: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表来执行此操作.

编辑: 所以这是你需要修改以使其工作:

小提琴

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 */
}

这是一个(简化)示例:

小提琴

在此示例中,您可以验证当删除第一列或第三列(或两者)时 - 中间列填充剩余空间.(右键单击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%;
}