Question

我在父盒子里面有两个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%;
}

Answer 1

就像我上面评论过的那样。这是你想要的吗？

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

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

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

Jsfiddle.

Answer 2

是的，make float：左边两个div;像：

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

Answer 3

使用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/

垂直对齐2个不同大小的div

3 个答案: