CSS浮动div占用剩余宽度

时间:2013-12-16 09:18:42

标签: css

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

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

看起来像是:

enter image description here

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时占用所有剩余的宽度。

2 个答案:

答案 0 :(得分:5)

您可以使用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%;
}

答案 1 :(得分:1)

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

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

#pages {
    overflow:hidden;
}

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

JSFiddle