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

【问题标题】：html element with percentage width needs to have a minimum width of its inner static content具有百分比宽度的 html 元素需要具有其内部静态内容的最小宽度
【发布时间】：2011-10-02 22:01:17
【问题描述】：

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

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

这是一个例子：http://www.nathanielkessler.com/div/csshelp.html

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

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

【问题讨论】：

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

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

对我来说只有最右边的元素会下降，中心列最终会离开屏幕并且不显示滚动条。火狐 5.