问题标签 [fluid-layout]

我在 Photoshop 中创建了一个按钮，并将它们分成 3 个图像。现在我想将这些图像放入 android 按钮。我知道如何在 android 中创建布局，但我缺少的一点是如何使它们变得流畅？

所以有一个按钮，我有 3 个图像。

我现在想问如何将这些图像用作<Button>标签，以便它重复中间的扩展。我需要在这里创造风格然后放上去background="@drawable/three_button_style"还是有什么我真的需要知道的？

ListView 也一样吗？我有一个列表视图和顶部、中间和底部的图像，所以我可以创建一个重复中间的 3 个图像的 ListView吗？

我正在尝试制作流畅的网格布局，但在 Opera 中遇到了宽度渲染不一致的问题。在 Opera 中，元素的宽度始终小于其他浏览器。我正在尝试使用流体 960 网格系统，但如果不一致，我可能会更改为固定尺寸。

有谁知道我如何让 Opera 呈现与其他浏览器相同的宽度？

这是我用于此演示的 CSS 和 HTML

我的第一个流体网格布局有问题。在大多数浏览器中，这种布局看起来是移位（可变宽度）。它只适用于 Firefox。（不适用于 chrome 或 opera） 我不明白为什么。

谢谢

I got this form...

With this CSS…</p>

I'm looking for an easy way to make the input fields fluid so that the width of input elements is always relative to the width of the fieldset element. In other words, the width of the label (125px) and input element should always be 100% of the width of the fieldset element. Is there an easy way to do this (without adding divs)?

根据我的理解，应该在我通过 tablerow 类指定的每一行上绘制一个黑色边框。但是边界没有出现。

我想改变一行的高度。如果我用 'px' 指定它——它可以工作。但是，如果我给它一个 % -- 将不起作用。我尝试了以下

某处出了点问题，但我无法理解在哪里。请帮忙！

更新与总结

既然附加了赏金，我觉得有义务让这个问题更清楚。

（另外，我很确定当calc()CSS3 单位值得到支持时，这将是小菜一碟，做类似的事情width: calc(25% - 5px)；虽然到那时我们可能会在脑海中浏览互联网）

我正在为一些共享设计要求的项目开发 CSS 框架；即流体12列布局。.column使用百分比宽度为 的浮动元素(100% / 12) x col_size，这相当容易。但是，问题在于在列之间添加了固定边距（或任何形式的间距）。

我最初的尝试使用了所描述的流体列，.panel每个列都嵌套了一个子项。HTML/CSS 片段如下（为简洁起见）：

此代码段将产生类似于下图的布局，但是所有.panel元素5px的所有侧面都有填充。我正在尝试使外部列的内容边缘与视口（或就此而言的父容器）的边缘齐平。另一种方法是.panel完全消除类，只使用列：

同样，这很好用，产生的结果更接近下图，但是现在（实际）问题是填充正在侵蚀列的宽度，从而搞砸了宽度分布。该列的内容区域宽度比其同级大:first-child10 像素（或任何边距大小）。

这可能看起来无害，甚至不引人注意；然而，在某些情况下，元素之间的精确（尽可能精确）宽度分布要么是必要的，要么会使事情变得更容易。

因此，无论是使用填充、边距还是它们的某种组合；有没有针对流体列、固定边距、均匀分布的排水沟空间的解决方案，不会从相邻列中抢走“边际”（***哈哈*）内容区域？**

原始问题

由于在我的搜索和尝试中简单地缺乏结果，我得出结论这是不可能的。如果任何地方都可以产生答案，我敢肯定它就在这里。

有没有办法使用纯 CSS 来实现具有固定宽度边距的流体宽度列布局？

重要说明：此图只是一个示例，而不是我希望实现的特定布局。给定的解决方案应允许相邻列的任意组合，总宽度分布总计为 12 或更少。考虑流行的960 网格以供参考。）

注意：在 12 列布局中，图像中列的宽度分布分别为 2、3、2 和 5。

到目前为止，我使用了一个使用百分比的网格，几乎可以做到这一点。问题是，为了实现边距，每一列都需要一个额外的孩子（我称之为他们.panel）：

这又差不多，很好；这种方法的问题是第一列和最后一列具有外部“边距”（10px），并且每列之间的“边距”加倍（2 x 10px）

当然，通过包含新的 CSS3calc()值类型，可以更轻松地解决这个问题。方向：

我有一些 Javascript 修复，我已经破解了一些“有效”的东西，但我正在寻求。希望最神圣的圣杯存在。

不幸的是，以下解决方案以及@avall 提供的解决方案（尽管在简化方面肯定是一个不错的选择）并不是我想要的。主要问题是，边距在列之间分布不均。

我能看到这个工作的唯一方法是将.panel填充减少到5px和类似的东西：

这种解决方案是不可接受的，只是因为 IE8 无法识别:last-child（并且就此而言:only-child）伪选择器。

通常对于大多数基于 DIV 的布局，我按以下方式对页面（外部骨架）进行编码；

下面是我使用的 CSS；

现在我必须承认，由于我更喜欢​​ UI 开发（而不是布局设计），我并不完全理解“为什么”实际使用了其中一些 div。我的猜测是，其中一些 div 被用作旧版 IE 缺乏最小宽度支持的一种 HACK。

所以我的问题是；

1. 请让我知道上面的布局代码是否是标准的并且是跨浏览器兼容性所必需的（假设也有一定的最小宽度要求）
2. 您是否认为只有旧 IE 中的最小宽度支持才需要这么多 div，而最新的 IE（如 IE8/9）是否完全支持最小宽度？
3. 我现在想设计一个流畅的布局，即一个应该在多个平台上无缝工作的布局（桌面/平板电脑，如 iPad 和一定程度的移动设备）
4. 请建议任何其他骨架结构，以确保根据屏幕分辨率（台式机/平板电脑等）进行良好调整的流畅布局

鉴于按字母顺序排列的大量动态增长的事物列表，我希望将它们全部列在 3 列中。例如：

CSS中是否有任何方法可以为这样的列表设置3个相等高度的列，其中每个标题中的项目数未知？

一个流体列显示，我不需要编程一种方法来计算每列中应该有多少等。

谢谢你的帮助！

我正在设计一个流畅的布局，并且正在考虑对布局进行编码的正确方法。下面是我正在考虑的结构；

对于 CSS，我正在考虑将容器编码为 {width:90%;margin:0 auto;overflow:hidden}

对于 2 列，它们会以一些 % 宽度向左浮动..

正如你所看到的，因为我想要一个流畅的布局，我没有在任何地方使用 px 值..

我的其他要求是；

1 它应该根据视口自动调整 例如，在桌面或 iPad（在某种程度上是手机）上查看时，相同的 html 页面应该相对于视口按比例调整。

2 它应该与大多数桌面浏览器和 iPad 兼容，并且将来可以轻松扩展为其他平板电脑。

3 页面应该居中对齐（不确定 iPad 上是否有足够的空间）

请指出您可能认为可能由上述结构或 css 引起的任何问题。

请建议我的 HTML 和 CSS 代码（特别是容器）是否编码正确..我有点担心要做到这一点，因为这将适用于近 500 多个 htmls ......所以 woukd 不想得到进入后期任何类型的重大问题..

请提出尽可能多的想法..我对所有人都开放..

谢谢..

有两种方法可以实现流畅的设计（一种可以根据屏幕大小自行调整）；

方法 1：我们可以只使用可用的浏览器大小（或视口宽度/高度）并相应地定义我们的 CSS.... 这相当于使用 CSS @media max-width:320px 在这种方法中，即使是桌面浏览器将其压缩到非常小的尺寸将显示与移动设备上相同的设计

方法 2：我们根据查看它的设备（桌面/移动/平板电脑）设计我们的 CSS。这相当于使用 CSS @media min-device-width:768px

因此，如果您看到，我们如何根据“宽度”或“设备宽度”来识别要应用的 CSS 是不同的

我的问题不是关于媒体查询以及如何应用它们。

我的问题是这两种设计方法中哪一种应该是首选，它们中的任何一种都有什么优点/缺点？我们应该为设备设计还是应该为可用的浏览器区域设计？