CSS：固定布局还是浮动布局？ [关闭]

Posted 2023-03-05

【中文标题】CSS：固定布局还是浮动布局？ [关闭]

【英文标题】：CSS: Fixed or Float Layout? [closed]

【发布时间】：2010-09-24 16:48:18

【问题描述】：

我的问题围绕着 CSS 固定布局与扩展以填充浏览器宽度的浮动布局。

现在我遇到的问题是根据页面宽度调整标头的大小（我理解这是不可能的，因为当前浏览器实现CSS3's background-image: size;）。在这一点上，我觉得我已经陷入了僵局：我是重新设计网站以使用固定的 CSS 布局，还是保持当前布局并尝试使标头图片扩展以填充提供的大部分空间?此外，转向固定宽度布局的利弊是什么，以及使用一种布局而不是另一种布局的其他（看不见的）后果？

相关网站将作为对此问题的评论给出——我不希望被视为试图增加访问量。

编辑：还有其他想法吗？

【问题讨论】：

我读的是斯坦的天主教学校！

我也是。我仍然对此嗤之以鼻。

哇，经过这么长时间的投票。

【参考方案1】：

如何在调整浏览器大小时显示更多或更少的图像，而不是缩放图像？这不是完全相同的效果，但它是一种用图像填充整个空间的简单方法。

为了这个例子，我们假设您的标头广告的背景图片在城市天际线照片的顶部包含某种徽标。总体而言，这是 1600 像素宽。标志位于图像的左侧，而城市景观则延伸到最右侧。我们假设您的标记大致如下所示：

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

我们可以将#page 元素设置为elastic 宽度并将背景图片应用到#masthead 元素：

#page 
  max-width: 1600px;
  min-width: 800px;
  width: 80%;


#masthead 
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;

这里发生的情况是#masthead 元素将扩展为#page 元素的宽度，该宽度将介于800 像素和1600 像素之间（含），具体取决于浏览器窗口的宽度。当#page 元素为 800px 宽时，您只能看到天际线最左边的 800px；当它的宽度为 1600 像素时，您会看到整个天际线。这样一来，您的徽标始终可见，并且在调整浏览器大小时，会显示更多的城市景观。

这确实需要有一个更大的图像开始（至少与您的最大宽度一样宽，如果您使用弹性），但结果是无论大小如何都会看起来不错的标头 - 无需依赖正如 strager 所说，关于浏览器的图像大小调整算法。

【参考方案2】：

它是什么样的图像？它的任何部分是可重复的吗？有时使用两层，一层或标签用于图像的重复元素，另一层用于固定元素。

我们可以举个例子吗？为您的问题找到正确的答案会更容易。

【讨论】：

图片位于我在问题评论中发布的链接上。它是首页的标头。

【参考方案3】：

如果您尝试将背景图像扩展到页面的宽度，最好使用固定大小的布局，因为没有跨浏览器的方法可以将背景图像扩展到不同的大小取决于访问者的分辨率。

固定宽度布局为设计者提供了更大的灵活性，但对访问者却没有。如果您创建一个 X 像素宽的布局，那么您可以根据自己的喜好逐个像素地微调您的网站，而“浮动”布局（我称之为液体布局）完全基于百分比值，因此会有所不同从计算机到计算机。我觉得这很困难，因为您可以在屏幕上测试布局，但不知道它在其他人的屏幕上是如何显示的，并且（例如）20 像素的边距对 768 像素或 960 像素的固定宽度布局的影响比它在一个 1280 像素的液体电脑屏幕。

IMO 对固定宽度布局的主要缺点是它在大屏幕上看起来太小，而在小屏幕上看起来又太大。 768px 曾经是一个相当标准的固定宽度布局，但现在它太小了，因为世界远离了 800x600。现在 960px 是相当标准的，对于 800x600 来说太大了，但在 1280x1024 上仍然太小了。

这完全取决于您的受众以及您的网站如何组合在一起。一些布局可以变成流动的并且工作得很好，而另一些则必须固定（就像你描述的那样）。

【讨论】：

流动布局的问题是它们在大屏幕上可能太大了；没有人喜欢阅读每行 20 英寸长的文本。而且 CSS 没有列（然而……唉，即使 IE8 也不支持它）

【参考方案4】：

为什么不使用 标记作为您的标题图片（标头）而不是使用背景图片？

我建议不要缩放标题图形；大多数浏览器在图像缩放方面都很糟糕（最近的邻居是什么？）而且对很多人来说看起来并不好。

我自己喜欢流体/浮动/液体布局。事实上，我的大多数网站都使用单列，所以我不必担心“正常”网站布局所具有的所有复杂性。

【参考方案5】：

创建一个文本列扩展到浏览器的布局通常是一个坏主意。如果线条变长，文本将变得难以阅读。我建议为 text-column 设置一个固定的 with，大概 50 个字母宽。