Fatal编程技术网
  • iphone/
  • Iphone 流体布局问题

Iphone 流体布局问题

iphone html css ipad

Iphone 流体布局问题,iphone,html,css,ipad,fluid-layout,Iphone,Html,Css,Ipad,Fluid Layout,我正在设计一个流畅的布局，并且正在考虑正确的方法来编码布局。下面是我正在思考的结构 <body> <div id=container> <div id=col1></div> <div id=col2></div> </div> </body> 对于CSS，我考虑将容器编码为{width:90%；margin:0auto；overflow:hidden} 对于2列，它们将以大约%的宽度向左浮动

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

<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>
对于CSS，我考虑将容器编码为{width:90%；margin:0auto；overflow:hidden}

对于2列，它们将以大约%的宽度向左浮动

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

我的其他要求是

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

2它应能兼容大多数桌面浏览器和iPad，并在将来可轻松扩展到其他平板电脑

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

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

请建议我的HTML和CSS代码（特别是容器）的编码是否正确。我有点担心这一点，因为这将应用于近500多个HTML…所以我不想在以后的阶段讨论任何主要问题

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

谢谢。

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

（由于我现在很懒，所以我将样式保留在内联状态！）


专栏1
专栏2
容器上的90%宽度应为视口的90%。列将是计算的90%宽度的50%，不管是什么

我会使用母版页或类似的页面，所以如果您确实需要更改周围的内容，则必须在每个html页面上应用它：）

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

    <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>