响应式定位答案

【问题标题】：Responsive Positioning响应式定位
【发布时间】：2015-07-12 22:15:05
【问题描述】：

我有一个 div，里面有嵌套元素 A、B 和 C，所以我想做出响应：

如果我向上或向下缩放主 div（使其更大或更小），我将如何缩放包含的元素并保持相同的间距。我相信我必须使用相对定位，但我不确定如何使用它。我知道有响应式框架，如引导程序和基础，但我想知道如何使用 CSS 从头开始。

【问题讨论】：

请发布您的代码
您需要使用% 值和有史以来最有用的值：calc() 进行一些数学运算。这并不容易，但可行。
也许这会有所帮助：johnstonianera.com/responsive-two-column-layout
还没有编写任何代码。我一直在寻找如何做到这一点的最佳方法或一些代码示例，以便我可以遍历代码并尝试找出逻辑。
这是网络开发人员一直在做的事情，还是我让它变得比它必须的更复杂哈哈！

标签： css responsive-design css-position

【解决方案1】：

一种方法是对空间关系要求不高，让物体在其中“流动”。这是一个没有工作解决方案，适用于任何地方，只需要具有非固定尺寸的 css，也就是 width:xx%

【讨论】：

使用基于 % 的大小是最好的方法吗？
国际海事组织，是的。缺点是缺乏绝对定位控制。避免所有固定的尺寸和定位。然后通过向左缩小浏览器窗口大小进行测试，并观察内容的回流。我喜欢它，因为它是一个零损耗的解决方案。

【解决方案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>

【讨论】：