关于流体布局的问题答案

【问题标题】：Question on fluid layout关于流体布局的问题
【发布时间】：2011-09-07 16:52:38
【问题描述】：

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

<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>

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

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

如您所见，因为我想要一个流畅的布局，所以我没有在任何地方使用 px 值..

我的其他要求是；

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

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

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

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

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

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

谢谢你..

【问题讨论】：

标签： iphone html css ipad fluid-layout

【解决方案1】：

你可以很容易地做到这一点，因为它很灵活：

（因为我现在很懒，所以我将样式保留为内联！）

    <div id="container" style="width:90%; margin:0 auto; overflow:hidden">
        <div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
        <div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
    </div>

容器上 90% 的宽度是视口的 90%。列将是计算出的 90% 宽度的 50%。

我会使用母版页或类似的东西，所以如果你确实需要改变周围的东西，你必须在每个 html 页面上应用它:)

此外，尽管列是流动的，但您的内容可以确定最小宽度 - 例如如果您在一列中有一个 500 像素宽的图像，那么在调整大小时该列的最小宽度将为 500 像素，并且可能会导致您出现问题。简而言之，您需要考虑您将拥有的网站内容类型以及这可能如何影响布局。

【讨论】：