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

Question

更新： 这是目前最接近的解决方案：http://jsfiddle.net/bfcr62yd/11/

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

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

<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

我使用 Calc() 添加了宽度。这很简单。我在这里：http://jsfiddle.net/bwgrwgnz/3/

width: calc(100% - 770px);

但老实说，如果您可以解决旧版浏览器缺乏支持的问题，flexbox 可能是您想要的方式。

Ps。也并非所有地方都支持 calc() 。

编辑：上面还有一个 table 示例，它可以很好地工作。

Answer 3

并且，还有一个非 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。设置溢出-x：自动；在不需要时删除丑陋的卷轴...

Answer 4

您正在寻找这样的东西吗？ 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 5

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

.box {
  border: 2px dashed #00f;
  height: 100px;
  width: 50px;
}
.dynamic-box {
  width:auto !important;    
}
.dynamic-box-fixed-inner {
  display:block !important;
  overflow-x:scroll;
}
.inner-item {
  position:inline-block;
  padding:5px;
}

.table { display: table; width: 100%; table-layout:fixed; }
.tr { display: table-row; }
.tr div { display: table-cell; }

<div class="table">
    <div class="tr">
        <div class="box">a</div>
        <div class="box">b</div>
        <!-- this element should fill the remaining width -->
        <div class="box dynamic-box">
            <div class="dynamic-box-fixed-inner">
                <div class="inner-item">item</div>
                <div class="inner-item">item</div>
                ...
            </div>
        </div>
        <div class="box">d</div>
    </div>
</div>

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

HTML CSS Horizontally stacked elements 1 fills remaining width

html

css

responsive-design

responsiveness