飄來div來填補剩餘空間

我有一個CodePen爲此在這裏設置：http://codepen.io/anon/pen/Isqou 飄來div來填補剩餘空間

div.linksBox { 
border:1px solid #a9a9a9; 
background:#fff; 
-moz-box-shadow:0 5px 12px rgba(0,0,0,0.3); 
-webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3); 
box-shadow:0 5px 12px rgba(0,0,0,0.3); 
margin:0 12px 12px 0; 

text-align:center; 
overflow:hidden; 
} 

<div id="topFloats" style="margin-top:5px; overflow:hidden; border:1px solid black; margin-top: 10px;"> 
    <div style="width:20px; height:340px; float:left; background-color:red;"></div> 
    <div id="rightFloatWrapper" class="linksBox"> 
     <div class="rollover linkIconLayout" id="" style='width: 134px; height: 122px; background-color:green;' href=""></div> 
     <div class="rollover linkIconLayout" id="" style='width: 142px; height: 112px; background-color:blue;' href=""</div> 
    </div> 
</div>

紅色（左）圖像浮動DIV設置黑邊的div的高度。我需要一個內部（陰影）div（其最小尺寸由其內容div的大小設置）擴展以填充黑色邊框div中的剩餘空間。

我能夠通過從浮陰影區域浮起來填充水平空間，添加溢出和設置邊距以容納陰影。我怎樣才能填充剩餘的垂直空間？

來源

2014-09-10 XyberICE

您可以查看[flexbox]（http://css-tricks.com/snippets/css/a-guide-to-flexbox/）。否則，你可能不得不使用設置寬度或javascript – 2014-09-10 16:46:19

謝謝@zach！我需要支持IE 9，所以我想我將不得不使用JavaScript。雖然可能有一種方法可以用純CSS來完成。 – XyberICE 2014-09-11 20:13:02

已解決。 I ended up放棄浮動並在內部（陰影）div上使用position:absolute;right:0; bottom:0;top:0;。訣竅是使用right:5%並將（先前浮動的）紅色div的寬度設置爲相同（width:5%）。這實現了我試圖用浮動div做的事情，並且仍然保持了液體佈局的靈活性（如果我改變寬度，我還需要確保更改right:屬性）。

希望這會幫助其他人嘗試這一點。

乾杯！

來源

2014-10-16 19:50:19 XyberICE

飄來div來填補剩餘空間

回答

相關問題