html – 使div填满剩余空间

发布时间：2020-12-14 23:49:45 所属栏目：资源来源：网络整理

导读：我有3个div在一个外部div.我将它们左对齐地水平对齐.而div3为浮动权 div id="outer" div id="div1"always shows/div div id="div2"always shows/div div id="div3"sometimes shows/div/div div1和div3具有固定的大小. 如果div3被遗漏,我希望div 2填满剩余空

我有3个div在一个外部div.我将它们左对齐地水平对齐.而div3为浮动权

<div id="outer">

  <div id="div1">always shows</div>
  <div id="div2">always shows</div>
  <div id="div3">sometimes shows</div>
</div>

div1和div3具有固定的大小.
如果div3被遗漏,我希望div 2填满剩余空间.我该怎么做？

解决方法

这样的东西怎么样？ http://jsfiddle.net/steweb/ELKQg/

CSS：

#container{
    width: 100%;
    float:left;
    overflow:hidden; /* instead of clearfix div */
}
#right{
    float:right;
    width:50px;
    background:yellow;
}
#left{
    float:left;
    width:50px;
    background:red;
}
#remaining{
    overflow: hidden;
    background:#DEDEDE;
}

身体：

<div id="container">
    <div id="right">div3</div>

    <div id="left">div1</div>

    <div id="remaining">div2,remaining</div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!