1

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

像：

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

使用 CSS，有什么方法可以实现这一点？

4

3 回答 3

0

习惯了这个

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;}

演示

于 2013-07-29T04:46:03.370 回答
0

检查它，你可以检查现场演示：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;
}
于 2013-07-29T04:49:33.947 回答
0

此答案与 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

于 2013-07-29T05:17:16.177 回答