问题标签 [fluid-layout]

http://jsfiddle.net/vrcQp/

我希望这些按钮居中（三个版本代表同一事物的不同可能版本）..所以所有的 css 和 html 都必须相同..只是项目的数量必须改变。

我希望它们有一个固定的宽度，所以我不能使用内联元素（并且只是文本对齐中心）。

我还需要 html 标记足够简单，以便它也可以用于灵活地使用不同的样式表垂直堆叠按钮

关于如何做到这一点的任何想法？我没有办法。

现在有 1-3 个元素。理想情况下，它可能涵盖任何数字，但这不是必需的。我想让它在 IE6 中工作。

HTML 设置

CSS：

问题是中心列需要有一个最小宽度，但右列不应该移动到中心列。

我有一个流体宽度容器 DIV。

在这里面我有 4 个 DIV，都是 300px x 250px ......

我想要发生的是框 1 向左浮动，框 4 向右浮动，框 2 和 3 在它们之间均匀间隔。我希望间距也是流畅的，以便浏览器变得更小，空间也变得更小。

您能否举一些具有流畅布局的网站或教程的示例。

更重要的是，我正在寻找流畅且易于扩展到 桌面和移动/平板电脑浏览器 （例如 iPad）的 UI 设计

还有任何其他设计 UI 布局的最佳实践，这些最佳实践可以跨桌面/移动/平板电脑浏览器工作。

当我说移动设备时，我主要指的是屏幕尺寸至少为 7 英寸的平板电脑

请列出尽可能多的例子。

我希望一个 div 在所有分辨率下都具有一定的宽度（80%），并且浏览器也调整这个 div 的大小，只有宽度。我必须只工作宽度 css，没有 javascript

我有这个：

当我调整大小或以较低的分辨率查看时，此 div 会高于其他 div。有任何想法吗？

谢谢

我正在尝试在 CSS 中创建一个完全流畅的布局（一切都以 % 为单位），它可以跨平台无缝工作（桌面/移动/平板电脑，如 iPad）。

使用 Fluid Layouts，可以使图像完全流畅吗？例如：

• 这是否意味着它将调整/适应任何程度或窗口大小？
• 这也可以应用于背景图像吗？
• 这个属性在浏览器实现或其他方面是否有任何限制？

我正在使用 CSS 流体布局设计一个网站（基于自适应/响应式网页设计）

所以我不会给出任何固定值，即以 px 为单位（仅使用 %）

我的问题是；虽然我明白如果我给容器的宽度为 100%，它会根据浏览器窗口（或视口宽度）计算出来。但是当我们说正文字体为 100% 或 1 em 时，字体大小如何计算？桌面和移动设备上的可见字体大小是否相同？

我有设置灵活宽度的 DIV，例如 min-width:800px 和 max-width:1400px。在这个 DIV 中，有许多固定宽度为 200px 和 display:inline-block 的框。因此，根据父 DIV 宽度，这些框会填充整个空间。

我的问题是右侧的空白区域，这是由父 div 的可变宽度引起的。有时这个空白空间很小，看起来还不错，但是随着父div的宽度不同，这个空白空间几乎是200px。

我不知道，如果我把我的问题描述得足够详细，我希望这张图能帮助描述我的实际情况：

这就是我想要的：

使用 TABLE 可以轻松实现此自动边距。但是，我不知道确切的列数，因为它取决于用户的屏幕分辨率。所以我不能使用表格，而是坚持使用 CSS。

任何人都知道如何解决这个问题？提前感谢您的评论和回答。

编辑：我不需要 IE6 的支持。我想支持 IE7，但 IE7 是可选的，因为我知道有限制，所以我可能会在 IE7 中使用“div.wrapper”的固定宽度

EDIT2我需要处理这些框的多行，因此它们不会超过“div.wrapper”框并正确包装在多行框中，而不仅仅是一条长线。

EDIT3我不知道“列”的数量，因为这取决于用户的屏幕分辨率。所以在大屏幕上一排可能有 7 个盒子，而在小屏幕上可能只有一排 4 个盒子。因此，我需要在一行中不设置固定数量的框的解决方案。相反，当盒子不适合一行时，它们应该换到下一行。

我正在尝试构建一个流畅的布局，为此我正在设计大图像的样式：

这很好用，问题是我不能再在 html img 标签中使用 width 和 height 属性（它们没有效果）。我需要这些属性，以便浏览器可以在加载图像之前“保存”图像所需的空间，因此在加载图像时页面的其余部分不会移动。

有没有办法同时拥有这两个功能？（流体图像+图像加载前节省的空间）

I am building a prototype mobile web application and trying to get 3 fluid but "equal" columns using just css, I have made the assumption I can use 33% on two columns and 34% on the last column. However this doesn't equal 100%... Any ideas?

Basic maths tells me that 33 + 33 + 34 = 100 however in Chrome (Desktop) and Safari (iPhone 4 iOS5) I get some left over container div background colour.

This seems to be a bug with webkit since firefox can render this correctly.

Can anyone recommend a solution or is anyone else experiencing this problem?