问题标签 [fluid-layout]

您可以复制并粘贴以下标记和 css 以查看效果。

问题存在于“页脚”部分。

现在“column1”和“column3”是绝对定位的。

它仅在“column2”最高时有效。

如何在所有条件下使“页脚”不与 column1~column3 交错？

标记：

CSS：

我现在正在制作一个网站，我正在尝试决定是否应该让它变得流畅。固定宽度的网站更容易制作，也更容易使它们看起来一致。

不过老实说，我个人更喜欢看那些延伸到我显示器全宽的流畅网站。我的问题来自这样一个事实，即在大多数现代浏览器中，您可以控制并滚动鼠标滚轮以基本上调整任何网站的大小。

那么创建一个流畅的网站值得麻烦吗？

我想要一个 [Fixed][Liquid][Fixed] 跨浏览器兼容的布局。

HTML：

CSS：

这会工作/更好的方法吗？

我们正在考虑在我们的 Web 应用程序中使用来自 DojoX 的 DataGrid 组件。我遇到的问题是它似乎不能很好地处理流体（又名液体）CSS 布局——它似乎喜欢预定义的每个宽度。实际上，文档警告了列功能的自动宽度，而我尝试对表格本身使用动态宽度和高度的尝试失败了。

有没有人使用这个具有流畅布局的组件？任何其他做得更好的 JavaScript 数据网格组件（我们需要分页和单元格编辑会很好）？

还是这个问题在 JavaScript 和 CSS 渲染的上下文中太难解决了？

我正在为一位教授开发一个网站，但我在 Firefox 中的 CSS 存在问题。该网站被设计为可变宽度/高度，因此它可以在任何分辨率下填充屏幕，因此我使用了很多百分比来表示高度和宽度。但是，我遇到了图像问题。

http://projects.mediabounds.com/i.bradley.edu/

缩略图的顶部栏应该缩放图像，但它在 Firefox 中不起作用，图像保持 100% 的原始高度。它在 Safari 中运行良好（不了解 Internet Explorer）。我已将高度设置为 100%，宽度设置为自动。我希望它将图像缩放到 div 高度的 100%，然后相应地调整宽度。

谁能指出我错过了什么？

我使用这个流体网格系统：http ://fluid.newgoldleaf.com/

我有问题，如果列中的第一个内容元素是图像标签，则以下列中的内容会下降。

只有当第一个内容元素是段落或标题等，第二个是图像标签时，它才有效。

为什么？:-)

谢谢。

我目前正在使用 Fluid 960，并且我在 alpha/omega 上遇到了一些奇怪的行为。我对 alpha/omega 的理解是它用于修复嵌套网格中的左/右页边距。

但是，当我将 alpha/omega 应用于一对嵌套网格时，左侧网格的缩进非常浅，而右侧网格的右侧缩进很大（视觉观察）。有谁知道发生了什么？

我使用此处使用的相同软件http://us.gn.bartal.org/在 HTML + CSS 中创建固定宽度/高度树形图。

我想通过使用 JavaScript 函数将所有像素的绝对位置和大小转换为百分比来使其具有弹性。

您建议如何进行？我可以利用一些 jQuery/Prototype/Dojo 魔法吗？

我正在为我的博客开发的新主题中使用流畅的布局。我经常写关于代码的博客，并<pre>在帖子中包含块。内容区域的float: left列有一个max-width，以便该列在某个最大宽度处停止，也可以缩小：

我想要的是<pre>元素比文本列更宽，这样我就可以在没有水平滚动条的情况下容纳 80 个字符的包装代码。但我希望<pre>元素从内容区域溢出，而不影响其流动性：

但是，max-width一旦我将悬垂插入其中，就会停止流动：即使我将浏览器缩小到超出该宽度<pre>，列的宽度仍保持在指定值。max-width

我已经用这个最低限度的场景重现了这个问题：

我注意到执行以下任一操作都会恢复流动性：

1. 删除<pre>(doh...)
2. 去除那个float: left

我目前使用的解决方法是将<pre>元素插入到帖子列中的“中断”中，以便帖子段和<pre>段的宽度相互独占管理：

但这迫使我<div>在帖子标记中插入额外的关闭和打开元素，我宁愿在语义上保持原始状态。

诚然，我没有完全理解盒子模型如何与内容溢出的浮动一起工作，所以我不明白为什么float: left容器上和容器<pre>内部的组合会削弱max-width容器的性能。

我在 Firefox/Chrome/Safari/Opera 上观察到同样的问题。IE6（疯狂的）似乎一直都很开心。

这似乎也不依赖于怪癖/标准模式。

更新

我已经进行了进一步的测试以观察max-width当元素具有float: left. 我浏览了 W3C 盒子模型章节，但没有立即看到明确提及这种行为。任何指针？

我一直在尝试（徒劳地）构建一个页面，其元素会随着我更改窗口大小而调整大小。我让它在 css 中为图像工作没问题，但我似乎无法为文本完成相同的工作，而且我不确定在 CSS 中是否可能。而且我似乎找不到完成此任务的 jquery 脚本。

当用户调整窗口大小时，我本质上希望页面能够动态且流畅地缩放，而无需用户调用页面缩放。这适用于我通过 css 的 img div，但不适用于保持相同大小的文本。

有任何想法吗？