使div填满剩余空间 [英] make div fill up remaining space

问题描述

我在外部div中包含3个div。我通过将它们向左浮动将它们水平对齐。并将div3设为右浮动

 < div id = outer> 
 
< div id = div1>始终显示< / div> 
< div id = div2>始终显示< / div> 
< div id = div3>有时会显示< / div> 
< / div> 
  

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

解决方案

怎么办？ https://jsfiddle.net/Siculus/9vs5nzy2/

CSS：

  #container {
宽度：100％； 
 float：left; 
溢出：隐藏； / *代替clearfix div * / 
} 
 #right {
 float：right; 
 width：50px; 
背景：黄色； 
} 
 #left {
 float：left; 
 width：50px; 
背景：红色； 
} 
＃剩余{
溢出：隐藏； 
背景：#DEDEDE; 
} 
  

正文：

 < div id = container> 
< div id = right> div3< / div> 
 
< div id = left> div1< / div> 
 
< div id = remaining> div2，其余< / div> 
< / div> 
  

i have 3 divs conatined within an outer div. i am aligning them horizontally by floating them left. and div3 as float right

<div id="outer">

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

div1 and div3 have fixed sizes. if div3 is left out i want div 2 to fill up the remaining space. how can i do it?

解决方案

What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/

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;
}

Body:

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

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

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

这篇关于使div填满剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！