保持圖像

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/