如何使这个响应？

Question

对于我的一个网站，我必须做出响应，但我不知道如何。 我正在努力解决容器div的高度问题。 这是HTML：

<div class="container">
    <div class="vak1"></div>
    <div class="vak2"></div>
    <div class="vak3"></div>
    <div class="vak4"></div>
</div>

和css：

.container {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: 456px;
    width: 742px;
    top: 15%;
}
.vak1 {
    width: 344px;
    height: 216px;
    background-color: #666;
    position: absolute;
    top: 65px;    
    left: 0px;
    float:left;
}
.vak2 {
    width: 230px;
    height: 129px;
    background-color: #666;
    position: absolute;
    top: 298px;
    left: 114px;
    float:left;
}
.vak3 {
    width: 305px;
    height: 211px;
    background-color: #666;
    position: absolute;
    top: 0px;
    right: 73px;
    float:left;

}
.vak4 {
    width: 380px;
    height: 225px;
    background-color: #666;
    position: absolute;
    bottom: 0;
    right: 0px;
    float:left;

}

最好的方法是什么，让它完全响应？

Answer 1

您可以尝试： DEMO

但我不确定为小屏幕设备保留这种结构是否是一个好主意。

<div class="container">
<div class="cont">
    <div class="vak1"></div>
    <div class="vak2"></div>
</div>
<div class="cont">
    <div class="vak3"></div>
    <div class="vak4"></div>
</div>

<强>更新

Version 2 似乎是一个更好的小屏幕设计