如何实现这种响应式 CSS 布局？ [关闭]答案

【问题标题】：How to achieve this responsive CSS layout? [closed]如何实现这种响应式 CSS 布局？ [关闭]
【发布时间】：2017-03-19 17:02:22
【问题描述】：

这是我写的代码。布局应该是响应式的。

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title></title>
         <style type="text/css">
          .box {
               border: 1px solid black;
               }
         </style>
 </head>
 <body>
  <div style="height: 600px;">
    <div class="box" style="width: 30%; height: 70%; float: left"></div>
    <div class="box" style="width: 69%; height: 20%; float: left;"></div>
    <div class="box" style="width: 15%; height: 50%; float: left;"></div>
    <div class="box" style="width: 54%; height: 10%; float: left;"></div>
    <div class="box" style="width: 54%; height: 70%; float: left;"></div>
    <div class="box" style="width: 45%; height: 30%; float: left;"></div>
</div>
</body>
</html>

图片：

【问题讨论】：

<div class="box" style="width: 70%; height: 20%; float: left;"></div> 赚 70%
底部的 30 x 45 块在下方。图片是我想要实现的。
你试过下面的答案吗？
用所有的 css 和 html 创建小提琴
我假设你真的不想要边框。但是要使您的布局与它一起使用，请尝试添加 box-sizing:border-box

标签： html css

【解决方案1】：

你可以使用绝对定位：

<div style="height: 600px; position: relative;">
    <div class="box" style="width: 30%; height: 70%; top: 0%; left: 0%;">1</div>
    <div class="box" style="width: 70%; height: 20%; top: 0%; left: 30%;">2</div>
    <div class="box" style="width: 15%; height: 50%; top: 20%; left: 30%;">3</div>
    <div class="box" style="width: 55%; height: 10%; top: 20%; left: 45%;">4</div>
    <div class="box" style="width: 55%; height: 70%; top: 30%; left: 45%;">5</div>
    <div class="box" style="width: 45%; height: 30%; top: 70%; left: 0%;">6</div>
</div>

.box {
    border: 1px solid black;
    position: absolute;
}

小提琴：http://jsfiddle.net/hn5s6/

【讨论】：