1

4 つの DIV で構成されるピラミッドを構築しようとしています。レイアウトは次のようになります。

     ------
     | #1 |
     ------
----------------
| #2 | #3 | #4 |
----------------

さらに、中央の DIV (#3) から始まり、さらに #1、#2、または #3 のいずれかを含む 3 つの追加 DIV が必要です。これらの DIV は、後で jQueryUI を使用してスライド効果を構築するために使用されます。#1、#2、#4 が #3 から滑り落ちるように見えるはずです。

DIV 間のマージンは 2 ピクセルと想定されています。また、ブロック全体を中央に配置したいと考えています。

表示があっても: インライン; および位置: 絶対; 表示および非表示の DIV で有効にすると、レイアウトが正しくなりません。いくつかの負のマージンを使用しましたが、最初に問題ないように見えたときに、トップ DIV が html 本文の外側に配置されていることがわかりました。

私が望むものを達成するためのよりシンプルでエレガントな方法があると思います。

この特定の問題、または私の CSS を改善する可能性のある何かに関するあらゆる種類のアドバイスは大歓迎です。前もって感謝します

セバスチャン

ここに私がこれまでに持っているものがあります：

HTML:

<div id="centerbox">
    <div id="main">main</div>
    <div id="rail_top">
        <div id="top">top</div>
    </div>
    <div id="rail_left">
        <div id="left">left</div>
    </div>
    <div id="rail_right">
        <div id="right">right</div>
    </div>
</div>

CSS:

#centerbox {
    height: 602px;
    width: 904px;
    margin-top: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* blue */
#main {
    background-color: #33F;
    height: 300px;
    width: 300px;
    margin: 2px;
    z-index: 9999;
    position: absolute;
    display: inline;
    margin-left: 302px;
}
/* green */
#top {
    background-color: #3F0;
    height: 300px;
    width: 300px;
    z-index: 1;
    position: absolute;
    display: inline;
}
/* pink */
#left {
    background-color: #F06;
    height: 300px;
    width: 300px;
    z-index: 1;
}
/* orange */
#right {
    background-color: #FC0;
    height: 300px;
    width: 300px;
    z-index: 1;
    margin-left: 302px;
}
#rail_top {
    height: 602px;
    width: 300px;
    display: inline;
    position: absolute;
    margin-top: -300px;
    margin-left: 302px;
}
#rail_left {
    height: 300px;
    width: 602px;
    float: left;
    position: absolute;
    display: inline;
    margin-top: 2px;
}
#rail_right {
    height: 300px;
    width: 602px;
    float: right;
    position: absolute;
    display: inline;
    margin-left: 302px;
    margin-top: 2px;
}
4

1 に答える 1

1

必要な属性のいくつかを見逃しているかもしれませんが、これを試してください：

HTML:

<div id="wrapper">
    <div class="top">
        top
    </div>

    <div id="bottom-wrapper">
        <div class="rail_left">
            left
        </div>
        <div class="rail_center">
            center
        </div>
        <div class="rail_right">
            right
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS:

#wrapper {
    width: 904px;
    height: auto;
    margin: 640px auto 0 auto;
}
.top {
    margin: 2px auto;
    background-color: yellow;
    height: 300px;
    width: 300px;
}
#bottom-wrapper {
    margin: 0 auto;
    width: 904px;
    height: auto;
}
.rail_left {
    margin: 0 2px 0 0;
    float: left;
    height: 300px;
    width: 300px;
    background-color: red;
}
.rail_center {
    margin: 0 2px 0 0;
    float: left;
    height: 300px;
    width: 300px;
    background-color: blue;
}
.rail_right {
    margin: 0 auto;
    float: right;
    height: 300px;
    width: 300px;
    background-color: green;
}
.clear {
    clear: both;
}
于 2010-11-04T15:29:00.057 に答える