更新:这是迄今为止最接近解决方案的方法: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/
答案 0 :(得分: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 强>
答案 1 :(得分:1)
而且,还有一个没有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 ......
答案 2 :(得分:1)
我重组了它,但我认为这就是你想要的
<强> 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;
}
答案 3 :(得分:0)
我使用Calc()添加了一个宽度。它很直接。我在这里:http://jsfiddle.net/bwgrwgnz/3/
width: calc(100% - 770px);
但说实话,如果你能解决旧浏览器缺乏支持的问题,那么flexbox可能就是你想要的方式。
聚苯乙烯。 calc()在任何地方都不受支持。
编辑:上面有一个表格示例,可以很好地运作。
答案 4 :(得分:0)
我使用表格的解决方案:http://jsfiddle.net/bwgrwgnz/41/
select One.v + Two.v as Three
from (values(1)) One (v)
cross apply (values(2)) Two (v)