垂直对齐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

回答

相关问题