我在这里设置了一个 CodePen:http://codepen.io/anon/pen/Isqou
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>
红色(左) float div 中的图像设置黑边 div 的高度。我需要一个内部(阴影)div(其最小尺寸由其内容 div 的大小设置)来扩展以填充黑色边框 div 中的剩余空间。
我能够通过从阴影 div 中去除 float 、添加溢出并设置边距以适应阴影来填充水平空间。如何填充剩余的垂直空间?
最佳答案
已解决。我 ended up放弃 float 并使用 position:absolute;right:0; bottom:0;top:0;
在内部(阴影)div 上。诀窍是使用 right:5%
并将(之前 float 的)红色 div 宽度设置为相同的 (width:5%
)。这完成了我试图用 float div 做的事情,并且仍然保持了液体布局的灵 active (有一个小缺点,如果我改变宽度,我需要确保改变 right:
属性(property)也是如此)。
希望这会帮助尝试此操作的其他人。
干杯!
关于html - float div 以填充剩余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25770816/