问题标签 [liquid-layout]

我对这种液体布局的东西完全陌生。我注意到，和我们大多数人一样，虽然我的大多数布局组件“液化”，但不幸的是，图像不会。

因此，我尝试max-width: 100%在几个地方使用建议的图像。

然而，尽管定义了max-width和min-height的 img container，但img不能缩放。

如果您以较宽的分辨率查看它，您会注意到例如“儿童图像”不会缩放。

关于问题可能是什么的任何线索，为什么该图像不能缩放？

测试用例：

浏览器：Firefox 15.0 / Chrome 21.0

IOS：MAC OS X Lion - 10.7.3

分辨率：1920x1200

我得到了什么： 我得到一个直到容器结束才缩放的图像。img 宽度不适合article包含它的元素。

我所期望 的：我希望图像会放大，直到它到达容器的末尾。从视觉上看，我希望图像与下面的段落一样宽，在某种程度上，图像的右侧与下面段落的右侧保持垂直对齐。

目前，似乎只有 Firefox 和 Internet Explorer (!) 支持min-resolution和max-resolutionCSS 媒体查询（请参阅此处和此处）。我们什么时候可以期望 Webkit 浏览器支持这些媒体查询？特别是，哪些版本的 Chrome 和 Safari 将支持它们？如果开发版本不支持查询，是否计划支持它们？具有讽刺意味的是，带有 Retina 显示屏的 Macbook Pro 上的 Safari 尚不支持此查询。

谢谢您的帮助！

在开始时，我没有设置font-size，在 中插入一个长文本div，例如：

如果我缩小浏览器，溢出部分将变为下一行；

但是如果我将文本font-size大小设置为大尺寸，例如：

我缩小浏览器，溢出部分无法更改为下一行：

演示在这里

那么为什么会这样呢？我该如何解决这个问题？我希望无论我设置多大的尺寸font-size，布局都会像往常一样流动

我有以下片段，我想在平板电脑和手机上禁用它。

我正在考虑包含在媒体查询或其他内容中，如下所示：

但我确信这不会起作用，那么我将如何阻止这段代码在手机上运行呢？

我有这个类的 div：

如果您使用 Web 开发人员工具检查它，您可以看到浏览器如何计算元素的宽度和高度：

IE 9 --> 854.24 x 26.05

火狐 15.01 --> 854 x 28

Safari 5.1.7 --> 843 x 27

铬 22.0.1229.94 m --> 951 x 36

现在，正如您在上面看到的，Chrome 以不同的方式计算 %。我该如何解决这个问题？这是一个错误吗？Safari 也使用 webkit，但没有这个问题。

我正在做一个旧项目，它在所有方面都使用 em，从字体大小到布局（宽度、边距、填充等），这让我想知道使用 em 来布局页面和字体是否真的有任何好处?

我什至不使用 em 作为字体，我发现它们有点令人困惑，尤其是没有body { font-size: 62.5%; }技巧（这显然很糟糕）。据我所知，现在每个浏览器都可以正确调整 px 大小。

我不知道使用 em 对于移动设备的好处是否有任何好处，据我所知，这个元标记应该让移动浏览器以标准尺寸显示像素

来自CSS 2.1 规范：

参考像素是像素密度为 96dpi 且距离阅读器一臂远的设备上一个像素的视角。对于 28 英寸的标称臂长，因此视角约为 0.0213 度。对于在手臂长度上阅读，1px 因此对应于大约 0.26 毫米（1/96 英寸）。

我想我真正想问的问题是，在调整布局和/或字体大小时，em 是否比 px 提供任何好处（除了 em 允许您创建现场字体调整大小功能的事实）？或者 em 与 px 是否已经成为一种偏好？

我正在研究以下布局结构：

使用以下 CSS，我将页脚设置为页面底部：

如果“pageContainer div”中的内容很小，我不想在 div 中显示滚动条，而是将页脚附加到“pageContainer div”的底部（不是页脚总是在底部视口）

如果“pageContainer div”的内容很长，我需要页脚在视口（底部）中保持可见，并在“pageContainer div”中显示滚动条。

我该怎么做呢？有任何想法吗？谢谢！

PS：我需要一个不使用JS的解决方案。

我有一个容器，它有时包含三个元素，有时包含四个元素。容器的高度是恒定的。

对于像这样的垂直液体布局，基于 CSS 的方法有什么好的想法吗？

也就是说，孩子们的身高要么是 25%，要么是 33%，但他们自己算出来了吗？（聪明的孩子。） 编辑当然不一定要基于百分比......

我可以很容易地做一些基于 PHP 的事情，但更优雅的解决方案会很好。

在这个网站www.emblematiq.com中，布局是流体/液体。我正在查看代码，但似乎无法弄清楚它是如何实现的。看起来像一个固定宽度的布局，canvas元素的宽度为 1180px。

好像找不到

1. CSS 中的任何媒体查询。
2. 宽度是用 px 而不是 % 设置的。
3. 涉及的 JavaScript/jQuery 似乎与它无关。

我确信我遗漏了一些明显的东西，但我一生都找不到负责的代码。

所以这里是相关的标记，使其更清晰（我也把它放入jsFiddle）：

HTML

CSS

这里有几个关键点：

• 我很幸运，只能在 Windows 上定位 Google Chrome，所以我不必担心 IE8 等。
• 中央“编辑器” div 设置了溢出，以便在内容变得太大时垂直滚动条应该发挥作用。
• 左侧的 'nav' div 是可调整大小的，因为您可以抓住它右下角的手柄并使用它来水平调整它的大小。
• 靠近顶部的“详细信息”div 也可以调整大小；你可以抓住它右下角的手柄来垂直调整它的大小。
• 我不想给“详细信息”和“工具栏”div 一个固定的高度。

我遇到的问题是中央“编辑器”div 太大，即使它已overflow-y : scroll设置。尽管滚动条确实出现了，但它的底部范围超出了页脚，实际上超出了页面的边缘。

如果我降低整体页面高度（例如通过调整 jsFiddle 中的水平分割器），我可以看到中央“编辑器”div 的大小确实减小了（滚动条相应地增长）。但是，它的整体高度太大。

向左增加“导航”div 的宽度（使用调整大小手柄）也会导致中央“编辑器”div 的滚动条相应增长，这很棒。除了这样一个事实之外，它的整体结果高度也太大了。

'details' 和 'toolbar' div 的内容应该换行。例如，如果你将'nav' div 的宽度增加得足够多（使用resize-handle），你会看到'Button1 / Button2 / etc' 内容开始换行，并且'editor' div 相应地向下移位。“编辑器” div 的高度也需要考虑到这一点。

最后，如果我增加“详细”div 的高度（再次使用调整大小手柄），我发现它根本不会影响中央“编辑器”div 的高度；它只是被推到页面边缘之外，滚动条高度不会改变。

我认为发生这种情况是因为height: 100%我在“编辑器”div 上设置的内容是使用其祖先元素中不正确的东西的高度，可能是 body 元素。但我不知道该怎么办。

理想情况下，我会使用纯 CSS 解决方案，因为如果我使用 JavaScript，我可能必须处理许多不同的事件，例如调整导航和详细 div 的大小、调整屏幕大小、页面加载等。但我会如果 JavaScript 解决方案很简单，请对它持开放态度。

确实，简单是我在这里最追求的。

我已经孤立地看到了针对各个方面的不同解决方案，但没有任何东西可以将它们结合在一起。