css - 4 つの div の配置: 側面に 2 つ、中央に 2 つ

Question

横に2つ、中央に2つ、合計4つのdivの位置を配置したいです。

お気に入り：

         |  div middle top  |
div left |                  | div right
         |  div middle down | 

CSSを使用して、これを達成する方法はありますか?

Answer 1

この回答は Rohit Azad の回答と同じです。高さと背景色を追加して、はっきりと見えるようにしました。あなたがこれを望むなら、彼の功績を認めていただければ幸いです。:)

HTML

    <div class="pull-left">left</div>

    <div class="pull-right">Right</div>

    <div class="centerDiv">
        <div class="topDiv">Top Div</div>
        <div class="bottomDiv">bottom div </div>
    </div>
</div>

CSS

html,body{height:100%;}

.parent{
overflow:hidden;
border:solid 1px red; 
margin:0 auto;
width:600px;
height:100%;
}

.pull-left{
width:25%;
float:left;
background-color:red;
height:100%;
}

.pull-right{
width:25%;
float:right;
background-color:blue; 
height:100%;
}

.centerDiv{
margin:0 25%;
position:relative; 
height:100%;
}

.topDiv{
position: absolute;
top:0;left:0;
right:0;
background-color:yellow;
height:50%;
}

.bottomDiv{
position: absolute;
bottom:0;left:0;
right:0;
background-color:green;
height:50%;
}

JSFIDDLE