2

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

我只使用 CSS 完成了拉伸部分，图像将divs使用 JS 填充。我只需要知道使用 CSS 和 HTML 实现这种网格布局的最佳方法是什么。 在此处输入图像描述

或者，如果有人知道一个好的 css 样板开始（对于移动网站） - 我还要注意我正在使用 jQuery Mobile。

编辑：

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

一会会更新。

4

1 回答 1

0

解决方案 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重命名为块容器（不仅仅是容器，因为它由 bootstrap3 网格系统使用）并根据需要多次使用它，但始终注意col-xs- * 值，例如，如果您有 3 个容器（12col 网格系统 12/3=4），那么您将成功class="block-container col-xs-4"。

解决方案 2

或者您可以尝试使用纯 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%;
    }
}
于 2013-11-02T08:31:34.670 回答