保持图像

Question

我有3个<div>就像这间DIV位置：

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

CSS

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

我试图使新<div>与position:relative和float 但couldn”不要这样做。我不想使用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/