可這箱瓷磚的佈局，純CSS安排？

Question

有沒有一種方法來創建純CSS這種靈活的佈局安排？

我的實驗迄今未果:(寬度和高度應是靈活的！

Answer 1

了可以使用的高度絕對定位的div和百分比和寬度。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    overflow: auto; 
 
} 
 
.box { 
 
    background: #000; 
 
    display: block; 
 
} 
 
.one { 
 
    position: absolute; 
 
    height: 40%; 
 
    width: 57.5%; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.two { 
 
    position: absolute; 
 
    height: 25%; 
 
    width: 40%; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
.three { 
 
    position: absolute; 
 
    height: 55%; 
 
    width: 35%; 
 
    left: 0%; 
 
    bottom: 0; 
 
} 
 
.four { 
 
    position: absolute; 
 
    height: 25%; 
 
    width: 20%; 
 
    left: 37.5%; 
 
    top: 45%; 
 
} 
 
.five { 
 
    position: absolute; 
 
    height: 40%; 
 
    width: 40%; 
 
    right: 0; 
 
    top: 30%; 
 
} 
 
.six { 
 
    position: absolute; 
 
    height: 25%; 
 
    width: 62.5%; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div class="container"> 
 
    <div class="one box"></div> 
 
    <div class="two box"></div> 
 
    <div class="three box"></div> 
 
    <div class="four box"></div> 
 
    <div class="five box"></div> 
 
    <div class="six box"></div> 
 
</div>

Answer 2

<div class="container" style="position: relative;"> 
 
    <div class="sidebar" style="background-color: red; height: 214px; width: 214px; position: relative;margin-right: 76px;right: -1px;padding-right: 0px;"></div> 
 
    <div class="content" style="background-color: blue; height: 100px; width: 120px; position: relative;top: -214px;left: 223px;"></div> 
 
    <div class="subscript" style="background-color: green; height: 198px; width: 121px; position: relative;top: -195px;left: 222px;"></div> 
 
    <div class="sidebar" style="background-color: black; height: 227px; width: 100px;position: relative;top: -287px;"></div> 
 
    <div class="content" style="background-color: #434343; height: 100px; width: 105px; position: relative;top: -514px;left: 107px;"></div> 
 
    <div class="subscript" style="background-color: #462312; height: 109px; width: 231px; position: relative;top: -499px;left: 108px;"></div> 
 
</div>