使div填充剩余宽度

87

如何使div填充剩余宽度？

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

我如何才能div2填满其余部分？

html  css 
— 拉科洛斯
source
要获得最新的正确答案，请根据Adrien Be的回复更改所选的最佳答案。
— edwardtyl
我需要相反的方向，即固定宽度的中心div和外部的div。如果有人需要，我在底部添加了一个答案。
— damndaewoo 2015年

Answers:

63

试试这样的事情：

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

div自然会占用其容器的100％宽度，因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距，它自己的内容被强制置于它们之间。

请注意，“中间格”云后的HTML“正确的div”

— 利
source
1
我想我根据您的（最佳）解决方案找到了一个甚至更好的解决方案：）请参阅下面我提供的答案
— Adrien Be
有没有办法在不更改项目顺序的情况下执行此操作？即左div，中div，右div。如果您想在不同的屏幕尺寸上执行不同的操作，这一点很重要。
— Eliezer Steinbock，2016年
是的，左右中间的顺序确实是诀窍。它不允许正确的div不在两个div之下，对吗？
— Ansjovis86'8
49

最新解决方案（2014年10月）：可用于流体布局

介绍：

此解决方案甚至比提供的解决方案更简单Leigh。它实际上是基于它的。

在这里，您会注意到中间元素（在我们的示例中为"content__middle"class）根本没有指定任何尺寸属性-完全没有宽度，填充或边距相关的属性-而是overflow: auto;（见注1）。

最大的好处是，现在您可以在左右元素中指定amax-width和amin-width。这对于流体布局来说是很棒的..因此响应迅速布局:-)

注意1：在需要将margin-left＆margin-right属性添加到"content__middle"类的情况下，使用Leigh的答案。

非流体布局的代码：

在此，左右元素（带有"content__left"和"content__right"）具有固定的宽度（以像素为单位）：因此称为非流体布局。

http://jsbin.com/qukocefudusu/1/edit?html,css,output上的实时演示

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

具有流畅布局的代码：

这里的left和right元素（带有类"content__left"和"content__right"）具有可变的宽度（以百分比表示），但也具有最小和最大宽度：因此称为流体布局。

带有max-width属性http://jsbin.com/runahoremuwu/1/edit?html,css,output的流畅演示中的实时演示

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

浏览器支持

在以下网络浏览器上的BrowserStack.com上进行了测试：

  • IE7至IE11
  • Ff 20，Ff 28
  • Safari 4.0（Windows XP），Safari 5.1（Windows XP）
  • Chrome 20，Chrome 25，Chrome 30，Chrome 33，
  • 歌剧20
— 阿德里安·贝
source
2
我建议所有开发人员都使用这种方法，特别是由于响应式Web设计已成为必需。:)
— aullah 2015年
1
小心这一点。在某些情况下，如果由于溢出而导致高度不准确，则滚动条将出现在Firefox的content__middle div中。
— 杰森
嗨杰森，这很有趣，谢谢指出。发生这种情况时，您可以提供jsfiddle来显示实时示例吗？
— Adrien Be
这是因为overflow创建了块格式化上下文？将display: flex有同样的效果？
— Jayen 2015年
1
是的，它做到了。 developer.mozilla.org/zh-CN/docs/Web/Guide/CSS / ...很有帮助。最终使用overflow-y: hidden了它，因为a）设置了允许的宽度，b）具有最好的浏览器支持，c）不是桌子
— Jayen 2015年
38

Flex-boxs是解决方案-很棒。十年来，我一直想从CSS中得到这样的东西。您所需要做的就是display: flex为您的“ Main”样式添加样式flex-grow: 100（并且100是任意的-确切地说是100并不重要）。尝试添加此样式（添加颜色以使效果可见）：

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

有关弹性盒的更多信息，请访问：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/

— 英国电信
source
Flexbox很棒，但它只占用所需的空间，而不是剩余的所有空间。因此，我采用了overflow：auto解决方案。
— ThinkBonobo
@ThinkBonobo“它”是什么意思？伸缩框本身就像一个“块”，伸缩框内的物品肯定会占用比其所需更多的空间。
— 英国电信
@BT表示主要中央div。这绝对是一种适用于许多情况的解决方案，但不适用于我的特定用例。
— ThinkBonobo
1
@ThinkBonobo赌注，如果您发布了jsFiddle
— BT
23

使用CSS Flexbox flex-grow属性可实现此目的。

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>
展开摘要

— 雷吉·平卡姆（Reggie Pinkham）
source
1
最佳答案。可以工作4年，比其他解决方案更清洁。+1
— 哈利J
4

尽管bit发布答案的时间较晚，但这是不使用边距的替代方法。

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

这种方法就像魔术一样起作用，但是这里是一个解释：）\

在这里拨弄类似的样本。

— Sunny R古普塔
source
4

必须占用剩余空间的Div必须是一个类。其他div可以是id，但它们必须具有宽度。

CSS：

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML：

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

以下链接具有有效的代码，该代码应该可以解决其余的区域覆盖问题。

jsFiddle

— 阿维舍克·波塞（Avishek Bose）
source
1

我一直在寻找解决该问题的方法，我需要在中心固定一个div宽度，而在任一侧都需要一个流体宽度div，所以我提出了以下建议，并认为如果有人需要，可以将其张贴在这里。

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>
展开摘要

如果更改#center元素的宽度，则需要将的width属性更新.fluid为：

width: calc(50% - [half of center width]px);
— 丹达宇
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.