css

Question

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

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

最左边和最右边的 div (Div1/Div4) 是固定宽度；这是容易的部分。

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

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

我现在处理的方法是：

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

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

更新：为清楚起见进行了编辑。

更新 2：请注意，我不能假设 Div2 和 Div3 应该各自获得 50% 的可用空间。问题中明确说明了这一点，但不知何故，我一直基于这个假设得到答案。

score 11 · Accepted Answer

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

表格单元格：

parent: {display: table}

childs: {display: table-cell}

弹性网格：

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/

score 7 · Accepted Answer

使用overflow:hidden(或 overflow:auto - 只要溢出未设置为可见 [默认]) 触发block formatting contexts以填充剩余宽度

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

小提琴

标记

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

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

score 2 · Accepted Answer

这是一个使用 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;
}

score 1 · Accepted Answer

您可以将 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>

score 1 · Accepted Answer

计算（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/

您可以使用最小宽度：

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

score 1 · Accepted Answer

我认为可以在 css3 中使用弹性盒模型

以下代码适用于 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;
}

score 0 · Accepted Answer

我的解决方案借鉴了其他已经发布的解决方案，但是通过测试它们，我发现两个中央 div 中的内容与宽度的分布混淆了......只要它们具有完全相同的内容，它们就会保持相同的宽度，但一旦获得更多内容，宽度就会不均匀。

因此，在我的解决方案中，我使用 jQuery 将剩余宽度分配给两个中央 div，使它们的宽度即使在它们的内容上存在差异。

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

Bonus #2:轻松指定有多少个中心 div，并在所有这些 div 之间平均共享剩余宽度。只需更改剩余宽度除以的数字。

这是一个小提琴。以下是小提琴中发布的简化解决方案。当内容进入中央 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 影响的标记与“正常”标记分开。我还保留了控制台日志，以防您想调试。

score -1 · Accepted Answer

如果您知道 DIV1 和 DIV4 的宽度，然后尝试在 % 中找到其他两个 div 的宽度。尝试将 % 中的宽度提供给 DIV2 和 DIV3。IT 将起作用。

css - 在两个 div 之间拆分可用宽度

8 回答 8

标记

CSS

Related

Reference