关于流体布局的问题

我正在设计一个流体布局，并且正在考虑正确的方法来编码布局..Below是我正在思考的结构;关于流体布局的问题

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

对于CSS，我想编码的容器为{宽度：90％;保证金：0汽车;溢出：隐藏}

对于2周的cols，他们会飘然留下一些％宽度..

正如你所看到的，因为我希望有一个流体布局，我没有使用任何地方像素值..

我的其他要求;

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

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

3页面应该出现中心对齐（不知道是否有将iPad上的这种足够的空间）

Pleasepoint你可能会认为可以通过上述结构或CSS引起的任何问题..

请建议我的HTML和CSS代码（特别是容器）编码正确的..我有点全面了解这个权利，因为相同的情况将被应用到将近500 + htmls ...所以woukd不想在稍后阶段进入任何类型的重大问题..

请建议尽可能多的ideas..I是开放给所有的人..

谢谢。

来源

2011-09-07 testndtv

你可以做到这一点很容易在它是灵活的条款：

（我已经离开因为我现在很懒惰的样式内联的样式！）

<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，并且可能会导致您遇到问题。总之，您需要考虑您将拥有该网站的内容类型以及这可能会如何影响布局。

来源

2011-09-07 17:07:01 Stryder

关于流体布局的问题

回答

相关问题