Question

我想安排4个div的位置，2个侧面，2个位于中间。

像：

         |  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

这个答案与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

四个div定位：侧面2个，中间2个

3 个答案: