问题标签 [fluid-layout]

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

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

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

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

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

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

我正在尝试在我网站的页面上显示相当大的图像。我希望它根据用户的分辨率动态调整大小，以便它在每台显示器上占据相同百分比的屏幕。我该怎么做？

我创建了一个自定义 ToggleButton，其中的内容是手动粘贴到 XAML 中正确位置的 TextBlock（不仅仅是字符串）。ToggleButton 中的父布局是一个具有 2 列的 Grid，其中切换会在列之间交换 ContentPresenter 和一些图形。

当 FluidMoveBehavior 按钮打开时，图形动画完美（我正在使用 Expression Blend），但 ContentPresenter 中的 TextBlock 跳转时没有任何动画。

不知道为什么会发生这种情况，是否有任何我不知道的已知限制？

编辑：添加异常行为的 XAML 示例

注意：自从提出问题以来，我做的事情略有不同，但仍然想知道为什么会发生这种情况，因此隔离了有问题的按钮。

http://www.twofivefivefive.com/asctest/

我正在帮助一个朋友做这个网站，它是一个流畅的、基于 % 的设计（我没有使用过的经验）。

出于某种原因，我得到了一个水平滚动条，它滚动到右侧的空白处。我一点也不知道是什么导致页面比应有的更宽，我已经三次检查了代码，一切似乎都井井有条；我越来越绝望了！

任何帮助将不胜感激。

我有一个用<li>元素构建的流体网格。

例如：

所以这看起来像：

万岁！

问题是当我在<li>拉伸高度的元素之一中添加内容时。我想结束这样的事情：

但我实际上最终是这样的：

嘘！

所以基本上，当其中一个 s 从上面的元素向下推时，我试图保持“行”对齐<li>，而不是推到右侧的可用空间。

有人告诉我，无法访问固定宽度的网站，因为大多数屏幕阅读器无法阅读滚动到屏幕外的内容。有没有道理呢？这对我来说听起来不正确，所以我想我会要求对该主题进行一些澄清。任何信息将不胜感激，谢谢！

可能有一个简单的解决方法，但它已经困扰我很久了......

让我解释一下情况。我有一个 ID 为“容器”的 div，它包含页面中的所有内容（也包括页眉和页脚），这将使所有内容保持内联，我只需执行 1 个简单的“边距：0 自动；” 而不是倍数。因此，假设我将#container 的宽度设置为 80%。现在，如果我将另一个具有相同宽度 (80%) 的 div 放入其中，并为其指定 'header' 的 ID，四周有 10px 的填充，则布局将“中断”（可以这么说），因为页面将填充量添加到宽度。那么，如何在不使用#header div 的较低百分比等方法的情况下使其保持在边界内？基本上，我想让它变得流畅。

这是一些示例代码，可让您了解我在说什么...

CSS

HTML

谁能帮我解决这个一直困扰着我的问题？

我有可变数量的 div 作为列，我希望它们中的可变数量具有静态宽度（以像素为单位），并且它们的可变数量以扩展到窗口中的剩余宽度。如果我将流体列宽度组合为 100%，某些列将被挤出行 - 我是否需要使用 javascript 减去静态列的宽度以确定流体列在窗口宽度中的份额，或者是有我可以使用的css属性吗？

通过变量，我的意思是我不知道高级有多少流动或静态列，所以我不能使用预构建的 2 或 3 列模板。

这是我的意思的一个例子：

所以这有点难以解释，但我会试一试，希望有人能认出我在说什么。

所以我有一个StackPanel其中有 3Buttons和 3Lists也有 3VisualStates代表每个列表的“打开”状态（它是一个手风琴）。默认情况下，每个元素的高度设置为 0，并且在其各自的状态下，它的高度设置为自动。流体布局已打开，所以我可以从 0 -> auto...

tl;dr = 我用 FluidLayout 做了一个手风琴。

在我的一个手风琴窗格中，有一个ItemsControl我创建了一个生成的项目模板，其中有一个“扩展器”控件，您可以在其中单击一个按钮并显示更多内容。这也是通过VisualStates打开 FluidLayout 来完成的。但是，当我尝试扩展我的扩展控件时，它不会像它应该的那样从 0 高度 -> 自动高度顺利进行，它只会出现。

有人遇到类似的问题吗？

我有一个我想使用的布局的想法，但我无法让它正常工作。我希望这里有人可以提供帮助，因为我花了几个小时搜索。

布局是这样的。

一个包装 div 容纳 6 个子 div。无论包装器 div 的大小如何，这些子 div 必须始终居中。

问题是当浏览器的大小调整为更小并且一个框被敲到框下方的行时，框将向左点亮，而我希望它们始终居中。这可能使用纯 css 还是我需要使用一些 jquery？