css - 保持图像之间的 div 位置

Question

我有 3 个<div>这样的：

-----------------------------------------
|         |        div2        |        |
|  div1   |--------------------|  div3  |
|         |////////new div/////|        |
-----------////////////////////----------

CSS

.parentdiv{
position:relative;
}
div1,div2,div3{
position:relative
float:left}

我试着用它做新<div>的position:relative，float 但做不到。

我不想使用position:absolute.

Answer 1

将三个 divfloat:left或display:inline彼此放置，然后将中间的一分为二。

<div class="A">
</div>
<div class="B">
     <div class="upper">
     </div>
     <div class="lower">
     </div>
</div>
<div class="C">
</div>

和 CSS 之类的

    .A,.B, .C
    {
       float:left;
       width:30%;
       height:200px;
       border:1px Solid #CCC;
    }
    .B .upper
   {
      width:100%;
      height:50%;
      background-color:Yellow;
   }
   .B .lower
   {
    width:100%;
    height:50%;
    background-color:Green;
   }

看到这个小提琴

Answer 2

div将内部元素包裹在 contains中div。如果您希望所有div元素都具有相同的高度，则需要在三个兄弟上指定一个高度，然后为每个 Wrapped 指定一个 0.5 * 上述高度的高度div。

HTML

    <div id="d1">Div1</div>
    <div id="dc">
        <div id="d2">Div 2</div>
        <div id="d3">Div 3</div>
    </div>
    <div id="d4">Div4</div>

CSS

#d1,#dc,#d4{
    float:left;
    background: red;
    height: 40px;
    width: 40px;
    text-align: center;
}

#dc div{
    height: 20px;
}

工作示例：http: //jsfiddle.net/x64Vp/