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

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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

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