无需使用CSS浮点数即可复制html位置

Question

我正在尝试使用Float Example复制使用float属性将其内容与之对齐的Grid and Flex Solution。我想到处替换float属性，并且除了包含<section>和<aside>框的<div>之外，我已经能够正确对齐所有内容。这是应该的样子：

* {
  box-sizing: border-box;
  text-align: center;
}

section {
  padding: 20px;
  margin-bottom: 20px;
  background: #FFA500;
}

#full {
  width: 100%;
  overflow: auto;
  clear: both;
  color: #fff;
  background: #394549;
}

#division {
  padding: 20px;
  margin-top: 20px;
  background: #214fb3;
}

aside {
  float: left;
  width: 33%;
  height: 200px;
  padding: 20px;
  margin-left: 30px;
  background: #a6b747;
  border: 1px solid #eee;
}

 <section id="full">
    <aside>
      &lt;aside&gt; #a6b747
    </aside>
    &lt;section&gt; #394549
    <div id="division">
      &lt;div&gt; #6ea3da
    </div>
  </section>

这是我目前在position: absolute;框上使用<aside>的内容。

* {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
}

#full {
  grid-area: full;
  background: #394549;
  color: #fff;
  height: 200px;
  padding: 20px;  
}

aside {
  position: absolute;
  height: 160px;
  width: 33%;
  padding: 20px;
  margin-left: 30px;  
  background: #a6b747;
  border: 1px solid #eee;
}

#division {
  width: 100%;
  padding: 20px;
  background: #214fb3;
}

<section id="full">
  <aside>
    &lt;aside&gt; #a6b747
  </aside>
  &lt;section&gt; #394549
  <div id="division">
    &lt;div&gt; #6ea3da
  </div>
</section>

我不得不弄乱像素，以便以一种怪异的方式获得正确的高度，但是我不确定如何确定<div>和<aside>框的宽度。即使调整窗口大小时，它们也应与第一个示例保持一致，而且我也不确定如何对齐<section>和<div>文本。

Answer 1

因此，通过在旁边使用绝对定位，您需要在其余内容的左侧添加适当的填充，以使其位于右侧空间的中心。

但是，由于div位于一旁，因此您不能仅将较大的填充物直接放在该部分上，否则它将使所有内容向右推。这意味着内容<section> #394549必须放入其自己的容器中。

我在左侧添加的填充使用calc(33% + 64px);来计算左侧的边距，并恰好位于右侧的空间中心。

我还为所有内容添加了box-sizing: border-box;，因为它使宽度的计算更加容易，并使100％的行为更合理。您可以改用content-box，但必须调整尺寸以适应需要。您的原始尺寸使用border-box推理，因此我认为这是使尺寸正确运行的明智选择。

/* added box-sizing: border-box */
* {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  box-sizing: border-box;
}

#full {
  grid-area: full;
  background: #394549;
  color: #fff;
  height: 200px;
  padding: 20px;  
}

aside {
  position: absolute;
  height: 160px;
  width: 33%;
  padding: 20px;
  margin-left: 30px;  
  background: #a6b747;
  border: 1px solid #eee;
}

/* added this container and gave it padding */
#section-content {
  padding: 0 20px 0 calc(33% + 64px);
}

/* added padding on the left */
#division {
  width: 100%;
  padding: 20px 20px 20px calc(33% + 64px);
  background: #214fb3;
}

<section id="full">
  <aside>
    &lt;aside&gt; #a6b747
  </aside>
  <!--added additional container #section-content-->
  <div id="section-content">
    &lt;section&gt; #394549
  </div>
  <div id="division">
    &lt;div&gt; #6ea3da
  </div>
</section>