问题标签 [fluid]

快速提问。我的网站有一个选项卡式界面，但我的网站的所有部分都相互碰撞。如何实现流畅的布局，当显示较小时它会简单地调整大小。我读了几篇文章@alistapart，并让我的包含 div 相对于浏览器窗口和 d 容器中的所有其他 div 相对，但仍然没有。关于我还应该尝试什么的任何线索？

替代文字 http://www.thelawyerschronicle.com/images/siteprob.jpg

我们开发了一个软件。在这个软件中，我们根据不同的情况在不同的输入屏幕上显示和隐藏一些控件。

当我们隐藏一个控件时，会发生该控件占用的空间保持原样，并且布局有时看起来非常糟糕，尤其是。在具有大量控件的屏幕中。我们的客户不喜欢这样，并要求我们对此做点什么。

我的问题：是否有某种方法可以创建流体布局，以便在隐藏控件时，其余控件会自动调整自身以填充隐藏控件留下的空白空间，并且当控件显示时，它们应该自动让路用于控制并相应地调整自己。

我知道我们可以通过编码来实现这一点，但这需要在每个屏幕中使用大量代码来调整布局。我正在寻找可以减少每个屏幕编码的东西，因为有 80 多个屏幕。

请提出一些错误更少的方法，并且可以摆脱每个输入屏幕中不必要的编码。

Google 实验室浏览器大小

我一直更喜欢固定宽度的布局而不是流体宽度的布局，主要原因之一是我能够更好地理解整个画面的情况，而不必担心屏幕分辨率。

但是现在“图片”已经改变，现在大多数用户使用的最低和最高分辨率之间存在很大差异，他们似乎会一直存在。

我有一台只支持 800 像素或1024 像素宽的上网本；我还有一个支持1650 像素的 22 英寸显示器，支持1920 像素及更多像素的 24 英寸显示器变得非常普遍。

一段时间以来，我几乎“忽略”了 800 像素的用户，我一直在开发固定 950/960 像素宽，我还注意到流行的网站（其中一个是SO）要么使用这种方法，要么使用流畅的方法。

对于（几乎）纯文本网站（如Wikipedia），我认为使用流体系统没有问题，但其他所有依赖图像/视频来创建有趣内容的网站呢？社交网络、分类广告等等……他们解决这个问题的方法是什么（将是）？

在不久的将来， Seam Carving似乎是一个不错的选择，但它还不够成熟（浏览器和 jQuery 目前都不支持它），我也觉得用户不会理解它，对它感到困惑，因为结果放弃网站。

网络上的实际标准仍然是 1024 像素宽，而在 24 英寸显示器中未使用 980 像素似乎很奇怪，不要说错了。那么我们有什么选择呢？

我很想听听您对此的看法以及您在流体和固定系统方面的经验。

PS：也欢迎使用其中任何一种系统的流行网站，我对使用流体系统的非文本网站特别感兴趣。

编辑：我刚看到这个答案，我对流体布局和液体布局之间的区别有点困惑，它们不应该完全相同吗？

我喜欢制作流畅的布局，但众所周知，它的一个问题是在更大的屏幕上，它会导致文本水平延伸到不舒服的长度。

我自己的屏幕尺寸适中，所以我想知道这一点。拥有巨大屏幕的人通常会恢复他们的窗口并将其设置为更适中的宽度（多任务），还是将其最大化？

就设计而言，设置最大宽度没什么大不了的，但我还是要知道。

谢谢。

我有一个关于如何设置我的基本流体布局的快速问题。我在顶部有一个 40 像素高、100% 宽的标题栏，这看起来很棒。

然后我有一个#left 和#right div，每个分别浮动。这看起来很酷。它们都有 100% 的高度，效果很好，但问题是页面然后向下滚动 40px，因为标题栏有 40px ......如果我对标题使用流体布局，然后是内容框，它会看起来很糟糕在很小或很大的分辨率上。

有任何想法吗？

这是我的 CSS

这是我的html页面：

这有帮助吗:)

如何实现 Liquid 应用风格的流体模拟？我需要 LBM 还是 SPH？我认为 SPH 对于在 iPhone 上使用来说太重了。但是液体中的水看起来像 SPH。

谢谢！

I recently stumbled upon "elastic css" framework, which looks like a good thing to me. I tried blueprint already but I must say this seems to be an overkill for me (tried it with compass).

So my question to you rails/xhtml webdevelopers out there: Is the elastic css framework together with rails (3) and haml/sass a good thing? ;)

I searched the www but did not even find if elastic css can be used together with sass and haml - anyone has experience with that? Maybe there is also something as simple as fluid css out there? Are there any recommendations?

Thanks!

FYI: http://elasticss.com

我正在创建一个具有单列布局的 HTML5 网页。基本上，它是一个带有单独帖子的论坛主题。

我在我的 CSS 文件中指定该列的宽度为 600 像素，并使用margin: 0 auto;. 但是，个别帖子中的某些图像大于 600 像素并溢出列。

我想扩大单个帖子以适应更大的图像。但是，我希望所有其他帖子仍然是 600 像素宽。

现在，我只是使用overflow:auto它来创建一个滚动条，但这并不理想。这是否可以让单个帖子的宽度针对较大的内容增长，而对于普通内容保持固定？这可能只使用纯CSS吗？

提前致谢！

这个网站http://www.elkaniho.com/有一个 CSS 布局，这是我想要的，你看，div 堆叠在彼此的顶部，不是在精确的网格上，而是在底部和侧面。

当你重新调整浏览器的大小时，它们都重新调整得很完美吗？

任何人都知道我怎样才能获得与 elkaniho.com 相同的布局或这称为什么类型的布局？

我为我的最新设计创建了一个虚拟布局，但是当我在 ie7 中调整窗口大小以检查最小宽度是否有效时，它会将内容区域踢到侧边栏下方，而在所有其他浏览器（包括 ie6）中它的行为正如它应该做的那样。

演示链接

谁能看出是什么问题导致了这两个随机的额外像素启动它？