4

私は何週間もこのレイアウトを作ろうとしてきましたが、私はこのようにそれを得ることができないようです!

レイアウト例

ですから、それほど問題がなければ、私のサイトを続行できるように、誰かが私にリンクまたはそのようなものを取得してもらえますか.

4

1 に答える 1

11

これが（うまくいけば）正しい方向への一歩です。

デモ

ここで覚えておくべきいくつかの非常に重要なこと：

ポジショニングの基本

要素の位置を絶対に設定すると、ピクセル座標に基づいて自由に配置できますが、通常はコンテナに配置して制限することをお勧めします。相対位置 (またはデフォルトの静的以外のもの) を持つ親を作成することにより、絶対配置要素のコンテナーを作成します。

変数値 (パーセンテージ) を使用する

また、要素をパーセンテージで配置して、サイズを変更し、中央に配置できるようにします。要素に%幅または高さを与えることができ、それは最初の非静的親の幅またはその他の%になります。

要素の配置

次に、left プロパティと top プロパティを使用して、パーセント値に基づいて要素を配置できます。left for position:absolute 要素は、「最初の非静的親の左端からの値」を示します。上、下、右も同様です。

要素のセンタリング

最初の非静的な親の真ん中に絶対配置で要素を配置するには、左の値を 50%、上の値を 50% にします。(親の左端から親の幅の 50%、上からの高さの 50%)。これにより、要素の左上隅が親の中央に配置されます。要素を完全に中央に配置するには、幅と高さの半分だけオフセットする必要があります。これには、margin-left と margin-right を負の値で使用できます。

そこからは、提供されたデモで行ったように、必要に応じて調整できます。コードを調べて (後で参照するために以下にも貼り付けます)、要素がどのように配置され、どのプロパティが使用されているかを確認してください。

HTML

<div class="container">

    <div class="block tl"></div>
    <div class="block t"></div>
    <div class="block tr"></div>
    <div class="block l"></div>
    <div class="center"></div>
    <div class="block r"></div>
    <div class="block bl"></div>
    <div class="block b"></div>
    <div class="block br"></div>

</div>

CSS

.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
}

.center
{
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}
于 2011-11-08T23:18:00.237 に答える