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 */
}

margin:auto 0; 以降。仕事をしません（高さが0に変換されます）さまざまな種類のソリューションをすべて試しました。これ（jsfiddle）は、それに近づいたものです。

私がしたことは、基本的に 5 つのクラスを追加することでした。そのうちの 3 つとheight:10%;、コンテナーを含む 2 つです。height:35%; すべてが 1 つのコンテナーに囲まれています。height:100%;

ご覧のとおり、コンテナーが 500px から拡張されるたびに (私の例のサイズ)、中央が 2 回拡張されます。

どうすればこれを解決できますか??

4

1 に答える 1

0

レスポンシブデザインを行いたいと思います。では、ブートストラップを使用するのはどうですか?

非常に柔軟なグリッドシステムを備えており、ほとんどのデバイスでそのまま使用できます。

于 2013-09-26T15:50:39.693 に答える