css - このdivを配置するにはどうすればよいですか?

Question

私は5つのdivを取得し、そのうち4つは取得しました:

4divs{width:150px; height:100px; float:left;}

そして中間のdiv：

midDiv{width:200px; height:200px; float:left;}

そしてコンテナ：

container{width:500px; height:200px;}

私が欲しいのは：

Answer 1

and を指定して、各div#container{position:relative;}に絶対位置を指定します。

div:nth-child(1){position:absolute; top:0; left:0;}
div:nth-child(2){position:absolute; top:100px; left:0;}
div:nth-child(3){position:absolute; top:0; left:100px;}
div:nth-child(4){position:absolute; top:0; right:0;}
div:nth-child(5){position:absolute; top:100px; right:0;}

Answer 2

現在の html 構造では、css だけでそのレイアウトを作成することはできません。

次の html 構造が本当に必要です。これは、個々のブロックが内部にある 3 つのフローティング dic を持つ 1 つのコンテナーを意味します。

<div class="container">

    <div class="container-2">
        <div class="div1">
        </div>
        <div class="div1">
        </div>
    </div>

    <div class="container-2">
        <div class="div2"></div>
    </div>

    <div class="container-2">
        <div class="div1">
        </div>
        <div class="div1">
        </div>
    </div>

</div><!-- / .container -->


.container {
    overflow: hidden;
}

.container-2 {
    float: left;
    margin-right: 10px;
    display: inline-block;
}

.div1 {
    width: 150px;
    height: 100px;
    margin-bottom: 10px;
}

.div2 {
    width: 150px;
    height: 210px;
    margin-bottom: 10px;
}

.container-2 .div1:last-child {
    margin-bottom: 0;
}

Answer 3

Div の CSS の特定の状態から、目的を達成することはできません。何をするにしても、それを実現するには、指定された CSS を変更する必要があります。

あなたがそれについて行くことができる2つの可能な方法があります

1. 3 つの div を左にフロートまたはインラインで表示、つまり横一列に配置します。次に、左右の div を垂直方向に 2 つの部分に分割します。

    <div class="container">
      <div class="left">
         <div class="upper"> 
         </div>
         <div class="lower"> 
         </div>
     </div>
     <div class="middle">
     </div>
     <div class="right">
        <div class="upper"> 
        </div>
        <div class="lower"> 
        </div>
    </div>
   

2. あなたのdivを作るposition:absolute

最初の解決策については、このフィドルを参照してください

Answer 4

名前は div1、div2、div3、div4、および div-mid とします。このように並べてみてください...

<container>

<div1> </div1>

<div-mid> </div-mid>

<div2> </div2>

<div3> </div3>

<div4> </div4>

</container>

その後、あなたは

• div3 をコンテナーの左端に配置します。
• コンテナの右端にdiv4 を配置します。
• 次に、両方をコンテナの一番下に配置します。

そのために試してみてfloat: leftくださいfloat : right。position: relativediv3 と div4 でやってみてください。

お持ちでない場合は、Firebug を入手してください: https://getfirebug.com/