0

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

<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 ......所以 woukd 不想得到进入后期任何类型的重大问题..

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

谢谢..

4

1 回答 1

0

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

（我已经将样式内联了，因为我现在很懒！）

    <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%，无论如何。

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

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

于 2011-09-07T17:07:01.470 回答