四個div的定位：兩邊兩個，中間兩個

Question

我想安排四個div的位置，兩邊兩個，中間兩個。

喜歡：

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

使用CSS，有沒有什麼辦法來實現這一目標？

Answer 1

習慣了這種

HTML

<div class="parent"> 

    <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; 
} 
.pull-right{width:25%;float:right;} 
.centerDiv{margin:0 25%;position:relative; height:100%;} 
.topDiv{position: absolute;top:0;left:0;right:0;} 
.bottomDiv{position: absolute;bottom:0;left:0;right:0;} 

Demo

Answer 2

檢查它這一點，你可以查看現場演示：http://cssdesk.com/2JEQA

HTML

<div id="left"></div> 
<div class="wrapper"> 
     <div id="middle_top"></div> 
     <div id="middle_botton"></div> 
</div> 

<div id="right"></div> 

CSS：

#left { 
    float:left; 
} 

.wrapper{ 
    float:left; 
} 


#right { 
    float:left; 
} 

Answer 3

這個答案是一樣的羅希特·阿扎德答案，我只是增加了高度和背景顏色，以便您可以清楚地看到它。如果你想要這個，我會很高興，如果你給他的信貸。 :)

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