html - 移动设备的拉伸(stretch)布局

Question

我不确定如何仅使用 CSS 和 HTML 实现以下布局，以及如何在调整视口(viewport)大小时使 divs 拉伸(stretch)。此界面适用于跨移动应用。

我只使用 CSS 完成了拉伸(stretch)部分，图像将使用 JS 填充 divs。我只需要知道使用 CSS 和 HTML 实现这种网格布局的最佳方式是什么。

或者，如果有人知道一个好的 css 样板文件(用于移动网站) - 我还想指出，我正在为此使用 jQuery Mobile。

编辑:

因为我使用的是 JQM，所以我目前正在更新设计，它似乎可以工作。很好的引用:http://jquerymobile.com/demos/1.3.0-rc.1/docs/content/content-grids.html

稍后会更新。

Answer 1

解决方案一

可以使用bootstrap及其网格系统(以下示例使用bootstrap3)

http://jsfiddle.net/fAPhz/

HTML

    <!-- JQM Pages -->
<div id="page1" data-role="page">
    <div data-role="header">
         <h1>page1</h1>

    </div>
    <div class="content">
        <div class="container1 col-xs-6">
            <div class="top-box col-xs-12"></div>
            <div class="bottom-box bottom-box1 col-xs-6 "></div>
            <div class="bottom-box bottom-box2 col-xs-6 "></div>
        </div>
        <div class="container2 col-xs-6">
            <div class="top-box col-xs-12"></div>
            <div class="bottom-box bottom-box1 col-xs-6 "></div>
            <div class="bottom-box bottom-box2 col-xs-6 "></div>
        </div>
    </div>
</div>

CSS

.container1,.container2 {
    background-color:blue;
    padding:5px;
}
.top-box {
    background-color:pink;
    height:100px;
}
.bottom-box {
    height:50px;
    margin-top:5px;
}
.bottom-box1 {
    background-color:red;
}
.bottom-box2 {
    background-color:brown;
}

如果您希望拥有 n 个容器，只需将 container1 和 container2 重命名为其他名称，例如 block-container(不只是 容器，因为它被 bootstrap3 网格系统使用)并根据需要多次使用它，但始终注意 col-xs-*值例如如果你有 3 个容器(12col 网格系统 12/3=4)，那么你将使其成为 class="block-container col-xs-4"。

方案二

或者您可以尝试使用普通的 css 和 html。为了完全控制任何分辨率，您应该使用媒体查询。在此示例中，我展示了使用媒体查询支持小分辨率的粗略实现。

这只是一个开始，如果您真的需要这个，我可以进一步详细说明。

http://jsfiddle.net/DRZes/

<!-- JQM Pages -->
<div id="page1" data-role="page">
    <div data-role="header">
         <h1>page1</h1>

    </div>
    <div class="content">
        <div class="container1">
            <div class="top-box"></div>
            <div class="bottom-box bottom-box1"></div>
            <div class="bottom-box bottom-box2"></div>
        </div>
        <div class="container2">
            <div class="top-box"></div>
            <div class="bottom-box bottom-box1"></div>
            <div class="bottom-box bottom-box2"></div>
        </div>
    </div>
</div>

CSS

.container1, .container2 {
    padding:5px;
    width:48%;
    background-color:blue;
}
.container1 {
    float:left;
}
.container2 {
    float:right;
}
.top-box {
    background-color:pink;
    width:100%;
    height:100px;
}
.bottom-box {
    height:50px;
    width:49%;
    margin-top:5px;
}
.bottom-box1 {
    float:left;
    background-color:red;
}
.bottom-box2 {
    float:right;
    background-color:brown;
}
@media only screen and (max-width: 500px) {
    .container1, .container2 {
        width:47%;
    }
}
@media only screen and (max-width: 350px) {
    .container1, .container2 {
       width:46%;
    }
}
@media only screen and (max-width: 280px) {
    .container1, .container2 {
       width:45%;
    }
}
@media only screen and (max-width: 200px) {
    .container1, .container2 {
       width:40%;
    }
}