сохраняя положение 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

место три divs, 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

Wrap интерьер div элементов внутри содержащего div. Если вы хотите, чтобы все элементы div были одинаковой высоты, вам нужно будет указать высоту на трех братьев и сестер, а затем указать высоту .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/