响应式定位

Question

我有一个嵌套元素A，B＆amp; C里面这样我想做出回应：

如果我向上或向下缩放主div（使其变大或变小），我还将如何缩放包含元素并保留相同的间距。我相信我必须使用相对定位，但我不确定如何使用它。我知道有自适应框架，如bootstrap和foundation，但我想知道如何用CSS从头开始。

Answer 1

一种方法是对空间关系要求较低，并允许物体在其中“流动”。这是一个没有工作解决方案，无处不在，只需要非固定大小的css，又名宽度：xx％

Answer 2

您可以使用%这样的单位：

＆＃13;

＆＃13;

.w100{ width: 100% }
.w70{ width: 70% }
.w50{ width: 50% }
.parent{ margin-bottom: 20px; border: 5px solid black; background-color: #dfdfdf }
.container{ margin: 2% }
.box{ display: inline-block; padding: 3% 10%; background-color: black; color: white }
.box.a{ margin-left: 5% }
.box.b{ margin-left: 20% }
.box.c{ margin-left: 40% }

＆＃13;

<div class="parent w100">
  <div class="container">
    <div class="box a">A</div>
    <div class="box b">B</div>
  </div>
  <div class="container">
    <div class="box c">C</div>
  </div>
</div>

<div class="parent w70">
  <div class="container">
    <div class="box a">A</div>
    <div class="box b">B</div>
  </div>
  <div class="container">
    <div class="box c">C</div>
  </div>
</div>

<div class="parent w50">
  <div class="container">
    <div class="box a">A</div>
    <div class="box b">B</div>
  </div>
  <div class="container">
    <div class="box c">C</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;