问题标签 [liquid-layout]

你将如何在 CSS 中制作具有统一大小和边距的元素的流动网格？

我遇到的主要问题是利润。我觉得显而易见的解决方案是将宽度和边距设置为百分比并完成它。这不起作用，因为垂直边距是容器宽度的百分比。当容器水平调整大小时，垂直间距关闭。

我试过两种方法。一种带有百分比边距，另一种带有 'em' 边距。它们都不能正确缩放。我能做些什么？

我已经阅读了这个问题，但我无法找到适合我需求的解决方案，因为我的情况有点不同，而且我不太擅长 CSS。

我拥有的是一个包含其他三个 div 的 div：

• div1 在左边
• div2居中
• div3在右边

问题是 div2 可能存在也可能不存在。

这是我目前拥有的：

但这就是我想要的：

这是我的小提琴

有任何想法吗？谢谢！

我已经使用 Nail Doherty 的 coda 滑块几年了，我想知道是否有人知道一种使它具有响应性的方法，以便它对容器使用 % 宽度而不是 px。我知道它需要 css 中的固定宽度来计算 js 中面板的宽度，以使滑块正确工作/显示，但想知道是否有修复方法可以使其流动。

我可以使用媒体屏幕查询来调整它在某些屏幕分辨率下的大小，但如果可能的话，我会在一个流畅的答案之后。

我正在设置一个非常简单的固定液体布局。header 设置为 100%，sidebar 设置为固定宽度并浮动到左侧，内容区域的宽度未定义（使其填满剩余空间）。

它适用于除 IE 之外的所有浏览器，其中在侧边栏和内容区域之间添加了大约 3 像素的空白。

我无法在 JSFiddle 中重现该问题（即使我复制并粘贴了我的确切代码），所以我附上了图像。第一个图像在 Chrome 中渲染，第二个在 IE9 中渲染。

CSS (样式.css)

HTML

stackoverflow 帮助学习了很多很酷的东西，但不幸的是我被困在了一些东西上，不知道如何研究我的出路……所以这里提出了一个问题，我希望有一个简单的答案。

我已经布置了一个运行良好的网站，这正是我想要的，它使用了一个名为 LemmonSlider.js 的很棒的插件，我已经设法让它在布局中完全流动......几乎！

问题是它在 Safari、iOS 和 Chrome 上运行良好，但是当我在 Firefox 上测试它时，事情变得很糟糕，非常糟糕。我没有在 IE 中测试过，但我可以想象事情会一样时髦。

下面是一些简化的代码，让您了解我所做的事情......

我已经尝试在 body, html 标签中使用 min-height ，但这似乎没有帮助。

任何输入将不胜感激

我正在尝试构建一个自适应的多列布局（流体，弹性，无论你想要什么），并构建了一个测试文档来尝试这个想法。

我做了一些计算，得出的数字可以让 x 列完全并排放置在页面中。2 很容易 (50%)，4 (25%) 和 10 (10%) 也是如此。如果您考虑边距以留下排水沟并减去它，那么您将获得所需的列宽百分比。

一切似乎都很顺利，我构建了 CSS 和 HTML（见下文）并在 Firefox 中进行了尝试，一切正常。但是，当我在 Opera、Chrome 和 Safari 中试用它时，我遇到了问题。当它们并排放置时，这些柱子的总和似乎没有达到 100%，它们似乎略微不足。列越多，问题就越严重。通过 10 列，问题非常明显。

为什么会这样？Firefox 的行为是正确的，还是其他浏览器中正在发生的事情意味着要发生的事情？更重要的是，我如何解决它以在所有浏览器中产生一致的结果？

我已经构建了以下代码的 JSFiddle，可在此处获得。完整的测试页面也可以在这里找到。（JSfiddle 只是相关代码，而整个页面还有其他内容）

列的 CSS 如下：

我正在测试的（缩减版）标记如下：

为什么红框和绿框大小不一样？（我必须有绝对位置，因为我要覆盖两个图像）

我究竟做错了什么？

我是 html、css 和 javascript 的新手。我记得 10 年前当我搞乱 html 时，我能够用框架做到这一点。我想要一个目录在我的左边，我的内容在右边。我有五个要用作内容的 html 页面。如果我有一个页面的导航和标题在所有页面上都相同，并且内容区域中的五个内容页面没有框架，我是否可以做到这一点？我使用这个 html/css 作为基础：liquid two column page。我将对其进行修改以使左侧部分更瘦。

我可以在我的 index.liquid 页面（主页）上使用一个简单的 Liquid 标记片段来显示我拥有的所有产品，并使每个图像成为相应产品信息页面的链接吗？

我知道我应该知道如何做到这一点，但是对于我在 SO 和互联网上的所有搜索，它都在逃避我。一位朋友想要一个具有固定宽度居中包装器的页面，宽度为 990 像素。左右将没有内容，但他希望页眉和页脚像流动布局一样延伸到页面的末端。我从来没有建立这样的网站，所以我被困住了，我只做固定宽度的居中包装器。

我想用 CSS over 表格来完成这个，这是他的偏好。

标题不是纯黑色，它是一个薄的 .png，作为 BG 图像重复。

页脚是纯 BG 颜色。

页面当前设置了包含在中心包装中的正确页眉和页脚，但没有任何东西向左和向右延伸。

页面链接：http ://www.jalvisualmedia.com/testsite/mystique/private_label.php

如果我省略了任何有用的东西，请告诉我。