html - ポジショニング Div

Question

最終的に、パララックス Web サイトを立ち上げようとしていますが、最初のレイアウトの問題で苦労しています。次のレイアウトを取得しようとしています。

-------------------------------------
|                                    |
|                                    |
|           ______  ______           |
|           |       |     |          |
|           |       |     |          |
|           ______  ______           |
|                   |     |          |
|                   |     |          |
|                   ______           |
|                                    |
-------------------------------------

助言がありますか？

score 1 · Accepted Answer

これを試してください：

@charset"utf-8";
 #main {
    background-color:pink;
    width:1280px;
    height:100%;
    position:absolute;
}
#chapter1 {
    background: blue;
    width:90%;
    height:90%;
}
#chapter1_1 {
    background-color:red;
    width:100px;
    height:100px;
    left:100px;
    top:50px;
    position:absolute;    
}
#chapter1_2 {
    background-color:yellow;
    width:100px;
    height:100px;
    left:205px;
    top:50px;
    position:absolute;
}
#chapter1_3 {
    background-color:green;
    width:100px;
    height:100px;
    top:155px;
    left:205px;
    position: absolute;
}

<DIV>また、タグを閉じる必要があります。

<div class="whatever" />

正しくありません、それはする必要があります

<div class="whatever"></div>

score 1 · Accepted Answer

divを閉じた方法は、フィドルでそれらを閉じていませんでした。これにより、図に似たものが作成されます。

<div id="main">
    <div id="chapter1">
        <div id="chapter1_1"></div>
        <div id="chapter1_2"></div>
        <div id="chapter1_3"></div>
    </div>
</div>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
} 
#main {
    background-color:#00FF00;
    width:100%;
    height:100%;
    /*position:absolute;
    left:50%;
    margin-left:-640px;*/
}
#chapter1 {
    background: blue;
    height:100%;
    position:relative;
    width:100%
}
#chapter1_1,
#chapter1_2,
#chapter1_3 {
    height:20%;
    width:20%;
    position:absolute;
}
#chapter1_1 {
    background-color:red;
    top:10%;
    left:30%;    
}
#chapter1_2 {
    background-color:yellow;
    left:50%;
    top:10%;
}
#chapter1_3 {
    background-color:green;
    top:30%;
    left:50%;
}

score 0 · Accepted Answer

私はフィドルを更新しました。背景は絶対で、他のdivは相対的な位置にあります

Please refer link http://jsfiddle.net/MarmeeK/ngZdg/19/

CSSはこんな感じです

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}

私はこれでうまくいくと確信しています。:)

html - ポジショニング Div

3 に答える 3

Related

Reference