垂直對齊2個不同大小的div

我想讓上面的那個取70％的父盒子，第二個30％。我不想使用絕對位置。

任何想法？

********************** 
* top div   * 
* top div   * 
* top div   * 
* top div   * 
* top div   * 
* top div   * 
********************** 
* bottom div   * 
**********************

編輯：父盒子是浮動的，

#mright { 
    width : 45%; 
    float:right; 
    margin-right: 5%; 
}

來源

2013-07-16 shultz

的位置，但它打破了整體設計。我也嘗試過使用填充和邊距，但如果上層潛水中的內容發生變化，設計再次破裂，表格單元格和框線對齊就不要這樣做。 – shultz

#topDiv {width：100％;身高：70％; } #bottomDiv {width：100％;身高：30％; } –

我希望，但它也行不通，兩者只是相互碰撞。 – shultz

就像我上面評論。這是你想要的嗎？

#top{ 
    width: 100%; 
    height: 70%; 
} 

#parent{ 
    width: 45%; 
    height: 80%; 
    border: 1px solid black; 
    float: right; 
    margin: 5%; 
} 

#bottom{ 
    width: 100%; 
    height: 30%; 
}

Jsfiddle.

來源

2013-07-16 16:04:45

這就是我想要的，唯一的問題是父母的身高也是百分比而不是絕對數字。 – shultz

贊[this]（http://jsfiddle.net/ggGKe/17/）？擁有％而不是數字應該不成問題。似乎問題來自其他地方。 –

的確，我剛纔注意到最外面的div沒有任何高度屬性。 – shultz

是，使浮動：左雙方的div;像：

#parentDiv{ width:100%; } 
#topDiv{ width:70%; } 
#bottomDiv{ width: 30%; } 
#topDiv,#bottomDiv{ float:left; }

來源

2013-07-16 15:54:58

但後來我不能保持他們的比例相對於父母的分... – shultz

使用jQuery：相對和絕對

$(window).resize(function() { 
    $('.topDiv').height(($(window).height()/10) * 7); 
    $('.bottomDiv').height(($(window).height()/10) * 3); 
    $('.bottomDiv').css('margin-top', $('.topDiv').height()); 
    $('.bottomDiv').css('margin-left', $('.topDiv').width() * -1); 
}); 
$('.topDiv').height(($(window).height()/10) * 7); 
$('.bottomDiv').height(($(window).height()/10) * 3); 
$('.bottomDiv').css('margin-top', $('.topDiv').height()); 
$('.bottomDiv').css('margin-left', $('.topDiv').width() * -1);

http://jsfiddle.net/Hive7/PzVCR/1/

來源

2013-07-16 16:04:59

我試過了，它沒有奏效。 – shultz

垂直對齊2個不同大小的div

回答

相關問題