Question

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

<!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>

图像：

Answer 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/

如何实现这种响应式CSS布局？

1 个答案: