Html css未按比例放置div

我想做一个反应灵敏的div马赛克

我的HTML是

<section>
    <div class="big margin-bottom">1</div>
    <div class="right margin-bottom">2</div>
    <div class="medium right">3</div>
    <div class="margin-right">4</div>
    <div>5</div>
</section>

---

如果你仔细观察边缘，我看不出有任何区别（600 x 400）和（1200 x 800）@SureshPonnukalai，它们的大小不一样。这些元素会是图片吗？你试过一种叫做“div.inline”的东西吗@MuhammadSohailArif不知道你的意思吗？我看不出有任何区别（600 x 400）和（1200 x 800）@当然，如果你仔细观察边缘，它们的大小是不匹配的。这些元素会是图片吗？你试过“div.inline”吗@MuhammadSohailArif不确定你的意思吗？

.right {
    float: right;
}
.margin-bottom {
    margin-bottom: 1%;
}
.margin-right {
    margin-right: 1.1%;
}
section {
    position: relative;
    width: 600px;
    height: 400px;
    background: #ccf;                                   
}
div {
    float: left;
    height: 32%;
    width: 32.3%;
    border: 2px solid black;
}
.big {
    height: 64%;
    width: 66%;
}

.medium {
    height: 64.1%;
}