灵活或流畅的 CSS 布局答案

【问题标题】：Flexible or Fluid CSS layout灵活或流畅的 CSS 布局
【发布时间】：2011-08-30 02:06:23
【问题描述】：

通常对于大多数基于 DIV 的布局，我按以下方式对页面（外部骨架）进行编码；

<body>
<div class="wrapper">
    <div class="minwidth">
        <div class="layout">
            <div class="container">
                <div class="content">
                                          //Some content....
                </div>
            </div>
        </div>
    </div>
</div>
</body>

下面是我使用的 CSS；

html,body{padding:0;margin:0;background:url(../images/bodybg.gif) #ececed left top repeat-x;color:#3b3b3b;font:normal 85% verdana}
.wrapper{width:99.8%;min-width:959px;margin:0 auto}
* html .minwidth{padding-left:959px}
* html .minwidth,* html .layout,* html .container,* html .content{height:1px}
* html .container{margin-left:-959px;position:relative}
.content{padding:0;margin:0 16px}

现在我必须承认，由于我更喜欢 UI 开发（而不是布局设计），我并不完全理解“为什么”实际使用了其中一些 div。我的猜测是，其中一些 div 被用作旧版 IE 缺乏最小宽度支持的一种 HACK。

所以我的问题是；

如果上面的布局代码是标准的并且是跨浏览器兼容性所必需的（假设有一定的最小宽度要求）

你认为只有 min-width 需要这么多 div 支持较旧的 IE，并且最新的 IE（如 IE8/9）有完整的是否支持最小宽度？

我现在想设计一个流畅的布局，即一个应该可以工作的布局无缝跨多个平台（桌面/平板电脑，如 iPad 和一定程度上是移动设备）

请建议任何其他骨骼结构以确保流体可以根据屏幕分辨率很好地调整的布局（台式机/平板电脑等）

【问题讨论】：

标签： iphone css html fluid-layout

【解决方案1】：