響應定位

Question

我有一個嵌套的元素一個一個div，B & C內像這樣，我想作響應：

如果我縮放主DIV向上或向下（使它更大或更小）我怎樣才能縮放包含的元素並保持相同的間距。我相信我必須使用相對定位，但我不確定如何使用它。我知道有引導和基礎等響應式框架，但我想知道如何從頭開始用CSS。

Answer 1

一種方法是要對空間關係的要求不高，並允許對象只是「流」在其中。這是一個沒有工作的解決方案，作品無處不在並且只需要CSS與非固定的尺寸，又名寬度：XX％

Answer 2

你可以使用%單位是這樣的：

.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% }

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