CSS float div占用剩余宽度

Question

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

我有一个包含 3 个主要 div 的页面，它们都位于同一行( float )。 我希望中间的 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 toggle() 左侧的元素和右侧的注释。 当我删除其一侧的一个或两个 div 时，我希望 #pages 部分占据所有剩余宽度。

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

在此示例中，您可以验证当您删除第一列或第三列(或两者)时 - 中间列会填满剩余空间。 (右键单击检查元素，然后选择“删除节点”以删除 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%;
}