问题标签 [liquid-layout]

我刚刚完成了掌握 flex 的第一个月。到目前为止，我所有的项目都是非常小的固定大小的容器，应用程序中的所有内容都处于绝对位置。

下一个即将到来的项目将需要更动态的布局并需要一些建议。

该应用程序将包含 3 个容器（不确定要使用哪些）

容器 1

将是应用程序的整个宽度及其高度的四分之一。

Container 2 将位于 Container 1 下方。它将是应用程序宽度的一半和高度的 3 quaters。

容器 3将与容器 2 相同。

我希望能够折叠每个容器并让其他容器对此做出响应。

例如，我想折叠容器 1，以便容器 2 和 3 从 3 quaters 高度变为 100% 高度。

如果我折叠容器 2，容器 1 保持不变，但容器 3 从应用程序宽度的一半变为宽度的 100%。

这种事情会不会很难做。哪里是开始研究这个的好地方。

一个教程的链接会很棒，或者任何提供一些建议的建议，做/不做也会有很大的帮助。

多谢你们，

配音

我的问题是我需要一个始终位于底部的页脚，即使页面滚动等。但我不知道如何使内容跟随页脚。

请看给出的例子，这是一个非常相似的布局，我也有一个侧边栏，但你可以用 firebug 或类似的东西看到bodydiv 没有跟随页脚。

示例： 点击演示

标题说了算。我想要一个 2 列 CSS 布局：

• 居中 - 主要内容以页面为中心
• 具有固定（像素）的右列宽度
• 有一个流畅的左列 - 用完所有可用空间减去右列宽度
• 源代码排序 - 在 HTML 源代码中，左列内容位于右列内容之前
• 允许最小宽度 - 在我的示例中为 760px
• 允许最大宽度 - 在我的示例中为 1024px

如果窗口大于最大宽度，则内容将在页面的最大值处居中。如果窗口小于最大宽度，则内容会填充 100% 的页面，除非它小于最小宽度会出现水平滚动条。

我愿意使用一些小的 javascript 来处理不支持这些属性的浏览器的最小/最大宽度（我在看你 IE6），但我也愿意让这部分布局降级.

桌子很简单。我已经浏览了数百个示例布局，没有什么可以完成我所要求的所有事情，尽管有几个接近。问题似乎在于以相同的样式获得流畅的左列和源排序。我发现了几个具有正确源顺序的固定左/流体右（与我想要的相反）的示例，或没有源顺序的流体左/固定右的示例，但不是两者兼而有之。

我不在乎它是否使用浮动或负边距，但我想避免绝对定位。

所以我正在尝试创建这个布局。

这是构成页面的 3 个“框”的图片：https ://dl.dropbox.com/u/9699560/layout.jpg

这是我的尝试：https ://dl.dropbox.com/u/9699560/map.html

红框是谷歌地图，所以如果没有指定它的高度，它会缩小到零。我想做的是以下几点：

绿色框是固定宽度，固定高度。蓝色框应占据页面垂直高度的 20%，最大高度为 100px。红色框应该占据所有剩余的垂直空间。

如果有人能弄清楚，我想走得更远一点，这样当浏览器窗口垂直展开并且蓝色框的顶部到达绿色框底部的水平时，它会向左展开以占据页面的 100%宽度。

我已经尝试过浮动、绝对和相对定位，但我无法让它与纯 CSS 一起使用。如果必须，我会使用 JavaScript，但我想避免这种情况，除非它是唯一的选择。

谢谢！

这是一个尝试（如果您使用它，请删除评论）：

和 HTML

我目前非常头疼，试图让我正在构建的网站能够跨多种分辨率工作。主要导航是通过需要填充大部分视口的图像映射。我知道这已经完全过时了，但图像映射似乎是唯一允许多边形区域定界的非 Flash 解决方案——不过我希望有一个替代方案！

我最终设法让网站调整大小以允许使用条件 jQuery 和 CSS 在较小的监视器上显示主图像，但这也调整了 slickboxes 中的文本大小，这看起来很糟糕！

该网站（非常未完成）在这里。我知道导航还不完全清楚（悬停并单击油漆颜色），但我想先解决这个问题。

我的问题，总结一下：

1. 是否有另一种方法可以在不使用图像映射的情况下创建此多边形热点翻转图像？
2. 是否有其他方法可以调整图像映射和覆盖的 slickbox 的大小，同时保持文本大小相同？

非常感谢——整个周末都在拔头发！

我正在这个网站上工作：http ://www.justaddsolutions.com/SampleSite/

主要区域是 1024px 宽并且始终居中，这是实现的。但是，当浏览器窗口宽于 1024 像素时，我的客户希望黄色和红色条带延伸到浏览器窗口的相关边缘（左侧为黄色，右侧为红色）。

我想用基于 CSS 的 Liquid - Fixed - Liquid Layout 来解决它，其中中心部分居中，侧面部分具有相等的液体宽度。但是我自己无法弄清楚，也无法在任何地方找到如何做到这一点。

我确实在 mathewjamestaylor 液体布局网站上找到了 Liquid-Fixed-Liquid Layout，但是当浏览器的窗口缩小到小尺寸时，它会在 IE8 中中断。

然后我想通过在我的标题中使用 3 列表来实现这一点，并使用 background-image 和 repeat-x 设置我的 td 元素的样式，但这在 Chrome 和 Safari 中似乎效果不佳。

对此问题的任何帮助将不胜感激。

我正在尝试构建一个 3 列布局，左侧有一个固定列，中间有一个流体列，右侧有另一个固定列。

有人见过这个吗？

这里有类似的问题，但不是我正在寻找的解决方案。 CSS Layout 2-Column 固定流体

我遇到了液体布局和边框的问题，导致元素溢出。

• 这是一个带有无边框页面示例的 jfiddle（工作正常）：http: //jsfiddle.net/eRaB5/1/
• 现在这是我想要发生的事情的一个例子，但它打破了。 http://jsfiddle.net/eRaB5/2/

结构有点像这样：

我需要将这些值加起来达到 100%，以便左右边缘对齐。只有输入上的边框才能有效地使输入宽度width: 100% +2px;

有没有办法只使用 CSS 来解决这个问题？

你们中有人知道具有流体宽度的 jQuery 图像轮播吗？

我发现了这个：http ://www.nikolakis.net/liquidcarousel/ ...但是当你降低速度时它看起来很糟糕。

此外，我希望它在鼠标向一个方向移动时被激活，滑块应该向另一个方向移动。顺便问一下，这叫什么？

先感谢您。

我目前正在处理一个 liquibase.xml 文件来创建表 table_a。我的一个领域是<column name="state" type="ENUM('yes','no')"> 我使用 postgresql 作为我的 DBMS。有没有类似枚举数据类型的东西？我读过这个像http://wiki.postgresql.org/wiki/Enum

那 postgresql 没有这样的数据类型。CREATE TYPE 函数用于创建此数据类型。不过，我仍然不知道如何在 liquibase 中制作它。

有什么建议么？