第一個div總是在左邊，右邊剩下的 - 用CSS

Question

定位我嘗試archieve如下：

與此代碼：

<div style="height: auto;"> 
    <div class="box"> 
     <div style="height: 300px;"></div> 
    </div> 
    <div class="box auto-height"> 
     asdasd 
    </div> 
    <div class="box auto-height"> 
     asdasd 
    </div> 
</div> 

下面CSS ：

.box { 
    width: 45%; 
    background-color: green; 
    border: 1px solid red; 
    float: left; 
} 

.auto-height { 
    height: 50%; 
} 

這些盒子將會循環，第一個盒子會變大其他。所以我基本上希望第一個總是在左邊，其餘的都是正確的。

我試過http://jsfiddle.net/59bwh/但我無法得到身高：50％的工作。

那麼，右邊的框可能會超過2（最多5個）。

PP：對於標題感到抱歉（我在谷歌搜索，找不到任何東西，像我這樣的人可能會搜索相同的，所以我寫了這個標題）。如果您有任何建議，我會編輯它。

Answer 1

你問到在註釋中使用的表...

http://jsfiddle.net/59bwh/12/

<table style="width:90%" border="1" cellpadding="0" cellspacing="0"> 
<tr> 
    <td rowspan="2" style="height: 300px;">Cell 1</td> 
    <td>Cell 2</td> 
</tr> 
<tr> 
    <td>Cell 3</td> 
</tr>  

Answer 2

50％身高來源於父母，而不是兄弟。

<div id="wrapper"> 
    your boxes goes here 
</div> 

則CSS將

.wrapper { height: 300px } 
.box { height: 100% } 
.auto-height { height: 50% } 

Answer 3

我知道這並不回答每說你的問題，但是這可能是對你非常有用。

http://css-tricks.com/rotating-feature-boxes/

如果你不想使用插件，試試這個...

<div id="container"> 
    <div class="left"> 
      <div class="box"> 
      </div> 
    </div> 
    <div class="right"> 
      <div class="box-auto-height"> 
      </div> 
      <div class="box-auto-height"> 
      </div> 
    </div> 
</div> 

和CSS：

#container{ 
width:100%; 
margin:auto; 
display:block; 
height:100%; 
} 

.left{ 
width:50%; 
height:100%; 
padding:10px; 
float:left; 
} 

.right{ 
width:50%; 
height:100%; 
padding:10px; 
float:left; 
} 

.box-auto-height{ 
width:100%; 
height:50%; 
} 

div img{ 
max-width:100%; 
height:auto; 
} 
} 

Answer 4

你必須使用絕對定位。

.wrap { 
    position: relative; 
} 
.box { 
    width: 45%; 
    background-color: green; 
    border: 1px solid red; 
/* float: left; */ 
} 
.fixd { 
    position: absolute; 
    left: 50%; 
    top: 0; 
    bottom: 50%; 
} 
.fixd + .fixd { 
    top: 50%; 
    bottom: 0; 
} 

工作Fiddle。

重要的是爲父元素定義屬性position: relative;。第一個元素定義父級的高度。第二和第三個元素完全位於父代之內。您可以通過top和bottom屬性定義元素的高度。

如果右側元素的數量不固定，則必須通過JavaScript計算大小。

最簡單的JavaScript應該是這樣的：

$('.fixd').css('height', $('.fixd').parent().innerHeight()/$('.fixd').size()); 

在真正的應用程序，你必須做一些修正（補白，邊距，邊框）。然後腳本爲您小提琴應該是這樣的

var height = $('.fixd').parent().innerHeight(), 
    count = $('.fixd').size(), 
    boxSize = 0; 

// Correction of borders and margin-top size 
height = height - count * 2 - (count-1) * 10; 
boxSize = Math.floor(height/count); 

// set computed size 
$('.fixd').css('height', boxSize) 
    .first().css('margin-top', 0); 

// fix last element (it is because of rounding floating numbers) 
$('.fixd').last().css('height', height-(count-1)*boxSize); 

完全小提琴是here

Answer 5

修正你的提琴：

http://jsfiddle.net/59bwh/9/

.box { 
    width: 50%; 
    background-color: green; 
    border: 1px solid red; 
    box-sizing: border-box; 
} 

.fixd1 { 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:50%; 
} 
.fixd2 { 
    position:absolute; 
    top:50%; 
    right:0; 
    bottom:0; 
} 



<div style="position:relative"> 
    <div class="box"> 
     <div style="height: 400px;"></div> 
    </div> 
    <div class="box fixd1"> 
     asdasd 
    </div> 
    <div class="box fixd2"> 
     asdasd 
    </div> 
</div>