Question

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

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

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

对于2个cols，它们会向左浮动，有一些％宽度..

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

我的其他要求是;

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

2它可以兼容大多数桌面浏览器和iPad，以后可以轻松扩展其他平板电脑..

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

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

请建议我的HTML和CSS代码（特别是容器）是否编码正确。我对于正确编码有点过分了，因为同样适用于近500多个htmls ...所以不要我想在以后的阶段遇到任何重大问题。

请建议尽可能多的想法......我向所有人开放..

谢谢..

Answer 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％。

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

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

关于流体布局的问题

1 个答案: