问题标签 [fluid-layout]

好的，我正在研究需要在我的网站上实现的地图方面的流体 css。我发现这个演示看起来像我想要的：

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-39-fluid-fluid-fluid/

有没有办法让左列和右列变得流畅，以便它们可以用更大的浏览器窗口展开。但不能限制在一定宽度以下，比如每个 175px？

因此，如果某些用户有更多的浏览器空间，我希望能够使用它，从而允许所有三列都是流畅的。但是无论浏览器窗口多么小（不包括移动浏览器，不是移动应用程序），左右列都不能低于一定宽度。

我想我可能已经知道了这个问题的答案，但我需要进行健全性检查！

说我有

我可以使用 RESULT=TARGET/CONTEXT 将宽度更改为百分比。在这种情况下，上下文是一个最大宽度设置为 1000px 的容器，所以我可以这样做：

如果我将窗口缩小，则 div 将始终与其容器成比例。但如果我想做

我可以根据现在的目标是 570 来计算宽度，但是随着窗口的缩小，比例都会不同步。

我不能使用百分比边框。我不想使用 JS 继续检查上下文，我还不能使用 CSS3 box-border 声明。

如果我想使用 Ethan Marcotte 在响应式网页设计中描述的技术，在这种技术中，一切都相对于彼此缩小，如果使用边框，我会不走运吗？

干杯!

简要地：

如何在 CSS 中布置 N 列随机高度的 portlet，以便如果调整浏览器大小，减少列的数量（使用 @media (min-width:)）并且 portlet 仍然很好地放在页面上没有间隙。

这类似于将 多个固定宽度/可变高度框浮动到 2 列中 ，但更通用。

细节：

我已经构建了一个 Web 应用程序（PHP / Zend 框架），其中包含一个由一系列 portlet 组成的“仪表板”页面。Portlet 可以在流畅的布局中排列成 1、2、3 或 4 个等宽列（用户可选择）。当用户调整浏览器窗口的大小时，列会扩展以填充可用宽度，portlet 也会水平扩展。每个 portlet 的垂直高度由其内容定义。有些只有 1-2 行，有些可以是 30-40+ 行的文本/表格/图像等。

我想把它变成“响应式设计”，这样用户就不必选择列数。在小屏幕（例如 iPhone）上，只会显示一列。在宽屏幕上，它们可能有 4 或 5 列。如果调整浏览器窗口的大小，列数将向上或向下调整以允许 portlet 保持大约 300-400 像素宽。

我想我可以用一点 jQuery 和一些服务器端支持 (PHP) 来做到这一点，但如果可能的话，我更愿意在 CSS 中完成这一切（没有/最少的 javascript）。

我在一个有很多图像的摄影网站上工作，它们没有固定的高度和宽度，因为我希望这个网站是 100% 流畅的：你如何解决丑陋的 Chrome 重绘图像？（即图像首先以零高度显示，然后重新缩放到在整个布局中移动的最终大小）

我已经尝试了几乎所有方法，我的最后一个选择是用黑色 div 隐藏图像重绘，然后在图像加载完成时将其不透明度设置为 0（顺便说一句，我已经尝试使用 (document).ready 调用但是似乎为时过早：你会怎么做？）

我在页面上有基本的照片布局（用于投资组合）。有两种不同大小的图像块，较大的与较小的成正比，宽度和高度正好是两倍，块或窗口之间没有边距。只有几个较大的块与几十个较小的块混合在一起。它是一种响应式设计，因此在全尺寸网站上有 5 个 20% 的列，当窗口大小下降到某个宽度以下时，它有 3 个 33.333% 的列，所有这些都在 100% 最大宽度的容器内。图像在每个砖块内使用 CSS 设置为 100% 宽度和自动高度。我已经包含了一个线框来说明我所描述的内容。

我遇到的问题是让同位素响应流体布局。如果我在比最大宽度更宽的窗口中加载页面，它会完全按照预期放置块。但是，当我将浏览器窗口缩小到最大宽度以下时，这些块开始变得非常不稳定，有以下几种变化：堆叠成两列，中间有一个空列；图像之间的间隙；在大图像下方留下一个空行。

我可能没有很好地解释自己，但只是想知道是否有人有使用 Isotope 与流体布局的经验并且可能有一些见识。

简单地说，我希望网站的主体在 1024x768 显示器中占据 100% 的浏览器，并且对于具有更高分辨率（1024x768 及更高）的显示器，将主体显示在中间（居中对齐），在左侧留下等量的空间和正确的。

这在许多网站中很常见，但我不知道如何实现它。谁能告诉我如何完成我开始的 CSS 代码？非常感谢你。

HTML

CSS

对于固定和流动的 CSS 列，是否有可靠的跨浏览器解决方案？我需要一列固定在左侧，另一列在右侧流动。

下面是我的代码片段 -.promoImg并排.promoContent浮动。#recommends是浏览器宽度的 90%，.promoImg需要固定在 120 像素，我想.promoContent拉伸流体。

是否有任何解决方法可以按预期进行类似的工作？我希望有类似的东西width:remainder;或width:100% - 32px;。

width: auto;不起作用。

我认为唯一可能的方法是使用填充/边距、负值或浮点数，或者一些 html 标签 hack。我也试过显示：块；。

我喜欢得到与此相同的结果，没有表格http://jsfiddle.net/LJGWY/

我正在尝试在导航栏上工作，就像http://seesparkbox.com/上的导航栏 一般，当用户在计算机浏览器窗口中查看页面时，我希望导航完全水平。

但是，如果用户从较小的宽度（导致我的导航栏换行）查看导航，我想通过将公司徽标放在导航文本的顶部来重新格式化导航栏，并制作导航文本（链接）尺寸较小，以适应浏览器的大小。

我只需要一点正确的方向。如果有一个简单的答案，那就太好了，我真的很感激你的帮助，如果没有你知道的教程可以帮助解决这个问题，我也会很感激。

我对 css 还是很陌生。

我想为网页创建网格布局。它应该由九个完全适合当前浏览器窗口视口的单元组成。中心单元格应具有固定的宽度和高度，并水平和垂直居中。所有其他单元格都会动态调整以适应实际的浏览器窗口大小。

我更喜欢纯 CSS 解决方案，也许是开源 CSS 网格框架。不过，jQuery 也很好。