Question

我有一个包含四个div的容器（宽度未知），如下所示：

| Div1 | Div2 ............... | .............. Div3 | Div4 |

最左边和最右边的div（Div1 / Div4）是固定宽度;这很容易。

Div2 / Div3的宽度是未知的，我想避免为它们设置一个固定的宽度，因为根据内容可以比另一个宽得多（所以我不能只是让每个人使用50可用空间的百分比）

我希望浏览器自动计算Div2 / Div3的宽度，然后如果剩下剩余空间，它们应该伸展以填充任何剩余空间（Div2之间的剩余空间如何分开并不重要/ DIV3）

我现在接近这个的方式是：

Div1向左浮动（或绝对定位）
Div4向右浮动（或绝对定位）
Div2的左边距等于Div1的宽度（已知）
Div3的边距等于Div4的宽度（已知）

我的问题是，如何让Div2和Div3拉伸以填充剩余的可用宽度？我猜一个选项是使用display：table，另一种可能是flex-box。还有其他选择吗？

更新：为了清晰而编辑。

更新2：请注意我不能假设Div2和Div3每个都应获得50％的可用空间。这在问题中明确说明，但不知何故，我不断得到基于这个假设的答案。

Answer 1

我想出了3种不同的解决方案来获得合适的宽度：

表格单元格：

parent: {display: table}

childs: {display: table-cell}

Flex grid：

parent: {display: inline-flex}

childs: {flex-grow: 1}

盒装尺寸容器：

parent: {float: left}

container: {box-sizing: border-box; padding: 0 WIDTH}

childs: {width: 50%}

最后一个解决方案使用额外的html标记，并使用相对定位垂直对齐元素（意味着你必须有固定的高度）。

我建议你使用第一个解决方案，因为它与旧版浏览器更兼容，它实现起来很简单，效果很好。

演示：http://jsfiddle.net/R8mqR/9/embedded/result/

Answer 2

利用overflow:hidden（或溢出：自动 - 只要溢出未设置为可见[默认]）触发block formatting contexts填充剩余宽度

（我假设div1和div4的固定宽度为100px）

<强> FIDDLE

标记

<div class="div1">DIV 1</div>
<div class="container">
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>

CSS

html,body,div
{
    height: 100%;
}
.div1 {
    float:left;
    width: 100px;
    background: aqua;
}
.container
{
   overflow: hidden;
   padding-right: 100px;
   box-sizing: border-box;
    background: green;
}
.div2 {
    background:yellow;
    float:left;
}
.div3 {
    background:brown;
    overflow: hidden;
}
.div4 {
    position: absolute;
    right:0;
    top:0;
    background:pink;
    width: 100px; 
}

Answer 3

这是一个使用display：table的解决方案，实际上没有使用table，tr，td等：（FIDDLE）

HTML

<div id="foo">
    <div id="left"></div>
    <div id="center1">asdfasdfasdf</div>
    <div id="center2"> asdfasdlfkjasl;dkfjalsdjkf</div>
    <div id="right"></div>
</div>

CSS

div {
    border: solid 1px black ;
    height: 20px;
}

#foo {
    border: none; 
    display: table; 
    width: 100%;
}

#left, #right {width: 100px;}

#foo > div {
    display: table-cell;
}

Answer 4

您可以将Div2和Div3包装在父Div中，并将Div2和Div3的宽度设置为50％。

<div id="div1"> </div>
<div style="margin-left:*div1width*;margin-right:*div4width*;">
  <div id="div2" style="width:50%"> </div>
  <div id="div3" style="width:50%"> </div>
</div>
<div id="div4"> </div>

Answer 5

calc（http://caniuse.com/#search=calc）方式：

#foo {
    position: relative;
    background-color: #ccc;
}

#foo:after {
    content: "";
    clear: both;
}

#foo > div {
    width: calc(50% - 100px);
    height: 100px;
    float: left;
}

#foo > div:nth-child(1) {
    width: 100px;
    background-color: #f00;
}

#foo > div:nth-child(2) {
    background-color: #0f0;
}

#foo > div:nth-child(3) {
    background-color: #00f;
}

#foo > div:nth-child(4) {
    width: 100px;
    background-color: #000;
}

http://jsfiddle.net/coma/YPWcW/

填充/位置方式：

#foo {
    padding: 0 100px;
    position: relative;
    background-color: #ccc;
}

#foo:after {
    content: "";
    clear: both;
}

#foo > div {
    width: 50%;
    height: 100px;
    float: left;
}

#foo > div:nth-child(1) {
    width: 100px;
    background-color: #f00;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
}

#foo > div:nth-child(2) {
    background-color: #0f0;
}

#foo > div:nth-child(3) {
    background-color: #00f;
}

#foo > div:nth-child(4) {
    width: 100px;
    background-color: #000;
    float: none;
    position: absolute;
    top: 0;
    right: 0;
}

http://jsfiddle.net/coma/qqR4Z/

您可以使用min-width：

http://jsfiddle.net/coma/38KQt/2/

Answer 6

我认为可以在css3中使用flex box模型

以下代码适用于IE10，chrome，firefox，safari

<div class="mainbox">
<div class="marpad marpadout">
       div1
    </div>
    <div class="subbox marpad">
       div2
    </div>
    <div class="subbox marpad">
       div3
    </div>
    <div class="marpad marpadout">
       div4
    </div>
</div>

样式是：

.mainbox{
    width:100%;
    display:-moz-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:box;
    background:#ff0000;
 }

.subbox{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    -ms-flex:1; 
    box-flex:1;
}

.marpad{
margin:5px;
padding: 0 10px 10px 0;
background:#ccc;
}
.marpadout{
width:100px;
}

Answer 7

我的解决方案借鉴了已发布的其他内容，但通过测试它们，我发现两个中心div中的内容搞乱了宽度分布 ......它们会保留相同的宽度，只要它们具有完全相同的内容，但只要有更多的内容就会不均匀地宽。

所以在我的解决方案中，我使用jQuery将残余宽度分配给两个中央div，使其宽度均匀，无论内容上的差异。

Bonus #1: jQuery不需要知道左右div的宽度显式，因为它获取通过CSS定义的任何宽度。

Bonus #2:轻松指定中心div的数量，并在所有中心div中平均分配剩余宽度。只需更改剩余宽度除以的数字。

Here is a fiddle。下面是简化中提供的解决方案。 当内容进入中央div 时，小提琴更详细地显示了其他解决方案的缺陷。

<style>
    div { margin: 5px; padding: 5px; } 
    .js-container { border: 1px solid red; display: table; }
    .with-width { width: 80%; }
    .js-child { border: 1px solid gray; display: table-cell; }
    .left,
    .right { width: 100px; }
</style>

<h3>Using javascript to dynamically distribute the remaining width</h3>
<div class="js-container with-width">
    <div class="js-child left">left</div>
    <div class="js-child center">center</div>
    <div class="js-child center">center</div>
    <div class="js-child right">right</div>
</div>
<div class="js-container with-width">
    <div class="js-child left">left</div>
    <div class="js-child center">center left <em>doesn't get wider</em> because of extra content</div>
    <div class="js-child center">center right</div>
    <div class="js-child right">right</div>
</div>
<script>
    $(document).ready(function() {
        function containerWidth() {
            var w = parseInt($('.js-container').outerWidth(), 10);
            return w;
        }
        // console.log('containerWidth: ' + containerWidth());
        function outerChildrenWidth() {
            var wl = parseInt($('.js-container').find('.left').outerWidth(), 10);
            var wr = parseInt($('.js-container').find('.right').outerWidth(), 10);
            return wl + wr; // bonus #1
        }
        // console.log('outerChildrenWidth: ' + outerChildrenWidth());
        function centerChildWidth() {
            var w = (containerWidth() - outerChildrenWidth()) / 2; // bonus #2
            return w;
        }
        // console.log('centerChildWidth: ' + centerChildWidth());
        function setCenterChildWidth() {
            $('.js-container').find('.center').css('width', centerChildWidth() + 'px');
        }
        setCenterChildWidth();
    });
</script>

请注意，某些类的js-前缀是存在的，因为我用它将受javascript影响的标记与“普通”标记分开。我还保留了控制台日志，以防你想调试。

Answer 8

如果你知道DIV1和DIV4的宽度，那么试着找到宽度另外两个div在％.try中给出DIV2和DIV3.IT的宽度％工作

拆分两个div之间的可用宽度

8 个答案:

标记

CSS