Question

更新：这是迄今为止最接近解决方案的方法：http://jsfiddle.net/bfcr62yd/11/

我无法解决以下问题。简而言之，我需要一个元素来填充剩余的宽度，其中所有其他水平堆叠的元素都有固定的宽度。

UI有5个包装元素需要水平堆叠，并具有固定的最小宽度。左侧的2个元素和右侧的2个元素具有固定的宽度。中心包装元素宽度需要动态填充剩余宽度。中心元素具有子元素，其具有非常大的固定宽度。如果响应父级宽度小于子固定宽度，我希望子级溢出-x：滚动（隐藏剩余宽度并通过滚动查看）。

<div>
    <div class="box dates"></div>
    <div class="box dates_presets"></div>
    <div class="box groupings"></div> <!-- to fill remaining width -->
    <div class="box columns"></div>
    <div class="box columns_video"></div>
</div>

到目前为止我的尝试： http://jsfiddle.net/bwgrwgnz/1/ http://jsfiddle.net/hycd4non/13/

我发现这个简单的例子只适用于2个元素：http://jsfiddle.net/SpSjL/

Answer 1

尝试使用display: table | table-row | table-cell：

.table { display: table; width: 100%; }  /* set the width to your maximum width value */
.tr { display: table-row; }
.tr div { display: table-cell; }

您还需要删除“table-cell”元素中的所有浮点数

<强> JSFiddle Demo

Answer 2

而且，还有一个没有flexbox的解决方案。问题是强制滚动。一个或多或少的肮脏黑客成功了！

http://jsfiddle.net/d4n2fnpy/1/

#table {
display:table;
    width:100%;
    table-layout:fixed;
}

.box {
  border: 2px dashed #00f;
  min-height: 100px;
  padding-right: 10px;
    display:table-cell;
    word-wrap:break-word;
}
.dates {

    width: 200px;
}
.dates_presets {
 width:200px;

}
.groupings {
    overflow-x: scroll;
    word-wrap:initial!important;
    display:block!important;
   width:auto;
}
.columns {
  width:200px;

}
.columns_video {

    width: 200px;
}

P.S。设置overflow-x：auto;在不需要的时候去除丑陋的scroler ......

Answer 3

你正在寻找这样的东西吗？ http://jsfiddle.net/DIRTY_SMITH/bfcr62yd/14/

我重组了它，但我认为这就是你想要的

<强> HTML

<div id="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3">
    <div class="inside-div">   
blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
</div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>

<强> CSS

#container{width: 100%;}
.box-1, .box-2, .box-4, .box-5{width: 200px; height: 100px; background-color: blue; float: left;}
.box-3{width: calc(100% - 800px); height: 100px; overflow-x: scroll; overflow-y: hidden;background-color: red; float: left;}
.inside-div{height: 50px; width: 400px;}


.mini-box {
  padding: 5px;
  margin: 5px;
  border: 1px solid red;
  width: 20px;

}

Answer 4

我使用Calc（）添加了一个宽度。它很直接。我在这里：http://jsfiddle.net/bwgrwgnz/3/

width: calc(100% - 770px);

但说实话，如果你能解决旧浏览器缺乏支持的问题，那么flexbox可能就是你想要的方式。

聚苯乙烯。 calc（）在任何地方都不受支持。

编辑：上面有一个表格示例，可以很好地运作。

Answer 5

我使用表格的解决方案：http://jsfiddle.net/bwgrwgnz/41/

select One.v + Two.v as Three 
from (values(1)) One (v)
cross apply (values(2)) Two (v)

HTML CSS水平堆叠元素1填充剩余宽度

5 个答案: