不使用 CSS 浮点数复制 html 定位

Question

我正在尝试复制这个 Float Example that uses the float property to align its content, with this Grid and Flex Solution。我想在任何地方替换 float 属性，并且我已经能够正确对齐所有内容，除了包含 <aside> 和 <div> 框的 <section>。它应该是这样的：

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

这就是我目前在 <aside> 框中使用 position: absolute; 的结果。

* {
  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> 框的宽度。即使在调整 windows 的大小时，它们也应该与第一个示例保持一致，我也不确定如何对齐 <section> 和 <div> 文本。

Answer 1

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

但是，因为 div 位于旁边，所以不能将大填充直接放在该部分上，否则它会将里面的所有内容推到右边。这意味着内容 <section> #394549 必须放在自己的容器中。我在新容器中添加了 margin-bottom 以将蓝色框向下推一点。

我添加到左侧的填充使用 calc(33% + 64px); 来解释左边的边距并很好地落在右侧 space 的中心。

我还添加了 box-sizing: border-box; 到所有内容，因为它使计算宽度更容易，并使基于百分比的大小调整表现得更明智。您可以改用 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 so we can put padding
   on content without effecting the blue box.
   also added margin-bottom to put a little
   space between this and the blue box */
#section-content {
  padding: 0 20px 0 calc(33% + 64px);
  margin-bottom: 10px;
}

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

不使用 CSS 浮点数复制 html 定位

Replicate html positioning without using CSS float

html

css

grid

css-float

flexbox