2

我一直在这个问题上坐了大约 4 小时。我想的方式很长。所以我在这里：

一旦视口超过特定高度，我想垂直分布 div 容器。这是一个示例的草图。

在此处输入图像描述

HTML：

<div class="bubu">
    <div class="center1"></div>
    <div class="center2">
        <div class="element"></div>
    </div>
    <div class="center3"></div>
    <div class="center4">
        <div class="element"></div>
    </div>
    <div class="center5"></div>
</div>

CSS：

* {
    margin:0;
    padding:0
}
body {
    margin:0;
    text-align:center;
    background: no-repeat fixed center center #030303;
    allowtransparency:true
}
.bubu {
    background-color:#eee;
    position: absolute;
    height: 100%;
    width:500px;
    left: 50%;
    margin-left: -275px;
    /* width / 2 */
}
.center1 {
    background-color:red;
    position: relative;
    height: 10%;
    width:100%
}
.center2 {
    background-color:yellow;
    position: relative;
    height: 35%;
    width:100%
}
.center3 {
    background-color:red;
    position: relative;
    height: 10%;
    width:100%
}
.center4 {
    background-color:yellow;
    position: relative;
    height: 35%;
    width:100%
}
.center5 {
    background-color:red;
    position: relative;
    height: 10%;
    width:100%
}
.element {
    background-color:#123456;
    position: absolute;
    height: 250px;
    width:500px;
    top:50%;
    margin-top: -125px;
    /* width / 2 */
}

自保证金：自动 0; 不会完成这项工作（将转换为 0 高度）我尝试了所有不同类型的解决方案。这个（jsfiddle）是唯一接近它的。

我所做的基本上是添加五个类，其中三个，其中height:10%;两个包含我的容器height:35%; 所有东西都被一个容器包围height:100%;

如您所见，每次容器扩展（我的示例大小）关闭 500 像素时，中心扩展两次。

我到底该如何解决这个问题？

4

1 回答 1

0

我假设你想做一些响应式设计。那么使用引导程序呢？

它有一个非常灵活的网格系统，可以在大多数设备上开箱即用。

于 2013-09-26T15:50:39.693 回答