使用CSS进行灵活布局,使用一个固定宽度的元素

时间:2013-06-14 13:44:39

标签: html css

我一直在考虑这个问题,似乎无法找到理想的解决方案。

假设我有一个宽度灵活的div标签。在那个div中,我还有两个div,一个使用float,绝对位置或任何其他可用的属性。第一个div有一个固定的宽度,比如100px。第二个div必须占用剩余水平空间的100%。

我试过让两个浮动左边,第一个div宽度:100px第二个div位置:绝对,左边:100px,宽度:100%但是第二个div太长并且有100px的额外宽度。如果css允许像宽度这样的东西会很好:100%-100px。

2 个答案:

答案 0 :(得分:3)

你可以用css3

width: calc(100% - 100px);

修改:您可以在此处看到浏览器支持http://caniuse.com/calc

答案 1 :(得分:0)

您可能希望看到: Expand a div to take the remaining width

它解释了一个名为“块格式化上下文”的概念。你可以在“扩展”div的左侧或右侧有一个固定块