具有百分比宽度的html元素需要具有其内部静态内容的最小宽度

时间:2011-07-11 15:35:29

标签: html css css-float fluid-layout responsive-design

具有百分比宽度的html元素需要具有其内部静态内容的最小宽度

您好,我正在尝试创建流畅/响应式布局。有没有办法强制具有百分比宽度的html元素具有其内部内容的最小宽度?也就是说,如果它的内部内容有某种静态宽度,比如200px?

以下是一个示例:http://www.nathanielkessler.com/div/csshelp.html

如果在IE9中将其设置为Quirks模式并调整窗口的大小,它的行为与我想要的完全相同。 (注意当屏幕向内调整大小时,右边的第二个div如何在左边的第一个div下弹出)。

如果您将文档设置回IE9标准模式,然后向内调整大小,您将看到外部红色边框div不尊重其内部内容(黄色框)。我只是继续缩小到它的边界之外 有没有什么方法可以让它像怪癖模式一样? (没有JavaScript)

2 个答案:

答案 0 :(得分:0)

我认为你想要的是min-width CSS属性。设置.item { min-width: 200px; }

答案 1 :(得分:0)

谢谢,我最终找到了一个非常具体的css / html组合,它给了我以后的行为。适用于所有主流浏览器,包括ie7到ie。

基本上,在一行左浮动元素中,如果你给第一个元素一个min-width%设置而其余的元素是min-width%+ width%...你会得到一个流畅的布局当浏览器窗口缩小时,强制元素在其兄弟元素下删除。

这是一个工作示例,尝试调整浏览器的大小。 http://www.nathanielkessler.com/div/cssfluid.html