假设您有两个 div：一个具有流体宽度和最小宽度，另一个 div 向右浮动。例如，jsbin.com 上的这个现场演示（带代码）有：

如果您调整浏览器的大小并使其变窄，则流体 div 会相应调整，直到达到最小宽度。之后，如果进一步缩小窗口，就会出现水平滚动条，右侧浮动 div 开始溢出，隐藏在窗口右侧。

我想要的是，如果用户不断缩小窗口，在非浮动 div 达到最小宽度后，浏览器应该将浮动侧边栏 div 推到非浮动内容下方，而不是溢出（隐藏）到正确的。那可能吗？

好的，我正在制作一个有两侧的布局。左边是 30%，右边是 70%。我有一个宽屏显示器，所以所有的图像都将显示我想要的方式，并且还有足够的空间。但是在较低的分辨率和最常见的 1024x768 上，我制作的图像对于左侧来说太大了，并且超出了右侧的边界。我如何使图像自动调整大小以适应较小的分辨率？

CSS

好的，我正在尝试制作 3 列布局，但我希望所有列都具有 33% 的宽度和 50% 的高度。我还想在列的 3 个 div 上填充。但是每次我添加填充时，它都会使最后一个 div 转到下一行。

我怎样才能解决这个问题？？

html

css

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

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

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

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

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

三个元件位于流体容器内，配置如下：

元素 A 和 B 的宽度为 50%。元素 C 的宽度为 100%。你可以在这里看到一个活生生的例子。

当容器的宽度为奇数像素时，行的右边缘不对齐，这是由于在计算元素 A 和 B 的宽度时进行了舍入。您可以在调整框架大小时观察边缘未对齐和重新对齐。当第一行包含多于两个的元素（例如十）时，效果会更加严重。

相反，我希望元素 C 的宽度等于元素 A 和 B 的组合实际宽度，而不是组合百分比宽度。这是否可能不使用 JavaScript 或求助于表格？

好吧，我有一个 div 嵌套在另一个 div 中，内部 div 以 80% 的宽度居中。但它没有完全居中。

我如何使它完全居中？

http://jsfiddle.net/xx8hx/

http://postimage.org/image/15linq5yc/

html

css

为了使我的网站更具响应性，我正在尝试学习如何流畅地定义元素。今天我遇到了一个我终于修复的情况，但我不明白为什么修复工作，我想。

我无法链接到该网站 (NDA)，但我已经提供了一些包含相关元素的示例页面：

错误：http ://cruxwire.com/wrong.html 正确：http://cruxwire.com/right.html

我所拥有的是向左浮动的三个 div。我正在尝试向它们添加填充（以百分比形式）并使用 target/context=result，然后使用 *100（因为它是百分比。）

我的 Ethan Marcotte 的响应式网页设计副本说：“在元素上设置灵活填充时，您的上下文是元素本身的宽度。” 我给了 div 的 20% 的宽度。由于父元素是945px，所以每个div的像素宽度是189px。我想添加 20px 的填充，所以 20/189=0.1058201058201058。我为每个 10.58201058201058% 的 div 添加了一个填充。

这最终为每个 div 提供了 100 像素的填充，而不是 20 像素。我最终意识到填充是根据父元素的宽度计算的，而不是 div 本身。

我的解决方案是在每个现有的 div 周围放置一个额外的 div，这样我就可以将宽度应用于一个，将填充应用于另一个，这样就解决了问题。

为什么填充计算相对于其父元素而不是其自身元素？

我怎样才能做到这一点而不必添加额外的 div？

你可以在这篇文章链接的页面上看到代码，我也在下面添加了它。

错误的：

正确的：

我在 Internet Explorer 8 中的流畅布局（使用最大宽度：100% 的图像）遇到了一些问题。当我想将锚标记包裹在灵活宽度的图像和边距、填充和边框周围时，问题就出现了参与其中。这比你想象的要难一些。

所以 HTML 大致是这样的：

和造型：

所以我所拥有的是一个流动的图像，被一个带有填充和边框的锚包围。

以上是好的，除非图像小于容器。在这种情况下，锚点的内边距和边框会超出图像（填充容器的整个宽度）。

因此，让我们尝试一些方法来强制锚点适合其内容：

好的，现在锚框没有比图片大，但是锚标签在 Firefox、Opera 和 IE8+ 中又回到了不灵活的状态。但它确实触发了 IE7 中的布局，因此已经处理好了。接下来：

现在锚点又灵活了，但是当图像开始缩小时，它比容器大12px。锚点根据图像计算宽度，然后添加边框和填充。出于某种原因，Chrome 和 Safari 不这样做。无论如何，备用盒子模型来救援：

现在它在 Firefox、Chrome、Safari、Opera、IE7、IE9 中按预期工作，但由于某种原因不能在 IE8 中工作。在那里，锚仍然延伸到容器之外。我有点不知道该怎么做，因为box-sizing: border-box应该在 IE8 中得到支持。

我有一个 JSFiddle 页面可以隔离问题http://jsfiddle.net/3gkXU/22/

作为最后的手段，我可​​以使用 JavaScript 来检测锚是否大于其父元素，然后display: block在人们不太可能调整浏览器大小的假设下切换它。我不反对，但这里有 CSS 解决方案吗？

2011 年，我被 2 列布局难住了。我感到惭愧。;)

挑战在于提出这个问题：

对于典型的 2 列布局，您将左列的边距设置为与右侧 div 的边距相等，这没什么大不了的。然而，这个特定示例中的变量是，我不知道在任何给定时间右侧的 div 有多宽（它基于会变化的文本行。

总之，我需要：

• 2列布局
• 两列都占据了整个宽度
• 右侧的列与其包含的文本一样宽
• 左侧的列与剩余空间一样宽

似乎我之前必须建造这个，但我很难过。

我对 CSS、JS 或 jQuery 解决方案持开放态度。

编辑：

实际上，我已经可以看到一个相当简单的 jQuery 解决方案。我可以抓取右侧 div 的渲染宽度，然后做一些数学运算，从父容器的宽度中减去该宽度，然后将左列的宽度设置为相同。如果没有干净的 CSS 选项，那将是我的后备计划。

我正在研究具有两个固定宽度侧边栏（左侧和右侧）和一个流体中心的 3 列布局。我关注了 A List Apart 的圣杯文章，虽然这在大多数浏览器中都可以正常工作，但我在 Internet Explorer 7+ 中遇到了一些问题。

IE 7+ 的问题实际上并不源于这种技术，而是源于页面以怪异模式呈现的事实。但是，如果我让它以符合标准的模式呈现，许多过时的元素会被替换，并且需要完全重写。

鉴于这篇文章是几年前的，这是关于这个主题的最新参考吗？还是我应该应用不同的技术？

任何有关执行此操作的最佳方法的见解将不胜感激。