Question

我试图添加2个部分，分别将“ intro”和“ content”类一个接一个地添加，以便每当我调整窗口大小时，该部分都随文本一起调整大小（我管理了这一部分）。但是，现在我添加了第二部分，在调整窗口大小时，第二部分保持在相同位置，但是随着第一部分的高度变大，它应该向下移动一点。我认为这与第二部分的“ top”属性有关，但似乎无法自己解决。

链接到jsfiddle：https://jsfiddle.net/raichibald/gpjfL5mk/10/

HTML代码：

Charisma

CSS代码：

<section class="intro">
      <div class="container">
        <h1 class="section-heading">
          Lorem ipsum dolor sit amet.
        </h1>
        <p>text</p>
      </div>
    </section>

    <section class="content">
      <div class="container">
        <div>
          <h1 class="section-heading">
            Lorem ipsum dolor sit amet.
          </h1>
          <p>text</p>
        </div>
      </div>
    </section>

我希望随着第一部分变大（即使我添加了5000行文本），第二部分也会自动从当前顶部位置向下移动，但是出现问题。

Answer 1

将您的节放在父div中，并为父div设置.div类，如下所示：

.div {
   display: flex;
   flex-direction: column 
}

顺便说一句，您应该删除这些部分的绝对位置。

Answer 2

因此，我实质上已经删除了您的CSS，但是我有一个可行的解决方案，其功能非常复杂，代码更少。

我建议您看一下并在必要时将您的任何样式替换为该样式？

HTML

<section class="intro">
  <div class="container">
    <h1 class="section-heading">
      Lorem ipsum dolor sit amet.
    </h1>
    <p>text</p>
  </div>

<section class="content">
  <div class="container">
    <div>
      <h1 class="section-heading">
        Lorem ipsum dolor sit amet.
      </h1>
      <p>text</p>
    </div>
  </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: auto;
  padding: 40px;
}

.intro {
   background-color: red;
}

.content {
  background-color: gray;
}

如果您有任何疑问或希望我提供更多示例，请告诉我，我们非常乐意为您提供帮助！

看看JS小提琴：https://jsfiddle.net/hzLw0db3/

Answer 3

如果我正确理解您要实现的目标，则不需要display: flex或position: absolute或top声明。

您只需要两个<sections>，每个display: block。

工作示例：

.section {
  display: block;
  padding: 12px;
}

.intro {
  background: red;
  font-family: "Montserrat", sans-serif;
  min-height: 30vh;
}

.content {
  font-family: "Montserrat", sans-serif;
  min-height: 30vh;
  background: #b3bfb8;
}

.section-heading {
  text-align: center;
  margin: 4vh auto 0 auto;
  font-weight: 500;
  letter-spacing: 1px;
}

<section class="intro section">
<h2 class="section-heading">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, ullam id? Impedit commodi amet eos officiis vero, culpa quibusdam vel et quasi ullam harum dolorum tempore praesentium doloribus!</p>
<p>Cupiditate incidunt cum perferendis aliquid earum laborum molestiae minima totam a ad sequi, numquam culpa, tempore unde! Minus repudiandae consequatur saepe beatae.</p>
</section>

<section class="content section">
<h2 class="section-heading">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, ullam id? Impedit commodi amet eos officiis vero, culpa quibusdam vel et quasi ullam harum dolorum tempore praesentium doloribus!</p>
<p>Cupiditate incidunt cum perferendis aliquid earum laborum molestiae minima totam a ad sequi, numquam culpa, tempore unde! Minus repudiandae consequatur saepe beatae.</p>
</section>

如何正确地将两个部分一个接一个地放置？

3 个答案: