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

Question

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

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

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

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

score 0 · Accepted Answer

0

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

于 2011-07-11T21:01:21.197 回答

score 0 · Accepted Answer

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

基本上，在一排左浮动元素中，如果你给第一个元素一个 min-width % 设置和其余元素的组合 min-width % + width % ...你得到一个流体布局，迫使元素当浏览器窗口缩小时，放在它们的兄弟元素下。

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

2 回答 2