HTML CSS水平堆疊單元1填補剩餘寬度

更新：這是最接近到目前爲止的解決方案：http://jsfiddle.net/bfcr62yd/11/HTML CSS水平堆疊單元1填補剩餘寬度

我有麻煩解決以下問題。簡而言之，我需要一個元素來填充剩餘的寬度，其中所有其他所有水平堆疊的元素都具有固定的寬度。

用戶界面有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/

來源

2015-08-21 wbeange

進入flexbox。 – CBroe

沒有flexbox，有一些骯髒的黑客... http://jsfiddle.net/d4n2fnpy/發佈它作爲評論，因爲我不知道它是什麼，以及...防彈解決方案 - 例如在窗口大小調整時不能很好地工作，但是因爲你有固定的元素......或許這不是那麼大的問題...... – sinisake

其實，寬度的設置：auto，工作！ http://jsfiddle.net/d4n2fnpy/1/ – sinisake

用我的解決方案表：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>

來源

2015-09-08 17:15:55 wbeange

嘗試使用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; }

你還需要刪除所有的花車能細胞」分子

JSFiddle Demo

來源

2015-08-21 17:39:59 JRulle

我喜歡這個，讓我試試看。 – wbeange

我無法解決overflow-x：scroll;要求：http://jsfiddle.net/bfcr62yd/ – wbeange

@wbeange你可以解釋一下你的'overflow-x'需求。 – JRulle

我添加使用計算值（）的寬度。這非常簡單。我在這裏：http://jsfiddle.net/bwgrwgnz/3/

width: calc(100% - 770px);

不過說實話，Flexbox，就可能是你想去的地方，如果你能處理缺乏老的瀏覽器支持的方式。

Ps。 calc（）在任何地方都不支持。

編輯：上面有一個表格示例，它可以很好地工作。

來源

2015-08-21 17:45:20 itsallgoodie

1：Calc支持：http://caniuse.com/#feat=calc 2：Flexbox支持：http://caniuse.com/#search=flexbox 3：Flexbox信息：https：// css-tricks。 COM /片段/ CSS /一個引導到Flexbox的/ – itsallgoodie

而且，還有一個無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; 
}

附：設置overflow-x：auto;在沒有必要的情況下移除醜陋的垃圾...

來源

2015-08-21 18:06:51 sinisake

你是在找這樣的事嗎？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; 

}

來源

2015-08-21 23:17:55

HTML CSS水平堆疊單元1填補剩餘寬度

回答

相關問題