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

将三个div，float: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;
   }

请参阅此fiddle

Answer 2

将内容div元素包含在包含div的内容中。如果您希望所有div元素都具有相同的高度，则需要在三个兄弟节点上指定高度，然后为每个包裹的div指定高度.5 *前述高度。

<强> 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/

保持图像之间的div位置

2 个答案: