html - Parallax 网站中的 Text Div 和 Image Div 并排显示

Question

我正在制作一个视差网站，在页面顶部，我希望左侧是文本，右侧是图像。此时图像只显示在文本 div 下。

.section {
  width: 100%;
  text-align: center;
  padding: 50px 80px;
}

.sub-section {
  margin: 0;
  padding: 0;
  width: auto;
}

<section class="section section-light">
  <div class="sub-section">
    <h2>Section 1</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
      Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
      alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
    </p>
  </div>
  <img src="resources/img/scene1image.png" alt="scene1image.png">
</section>

Answer 1

如果您希望文本在左侧，图像在右侧，则需要创建一个包含文本的 div 和一个包含图像的 div。然后你可以将它们都放入 1 个 div 中以包含它们(嵌套 div)并将 inline-block 设置为两个内部 div。

然后您可以将两个内部 div 设置为 50% ，这样它们就占了 100% 的宽度。但是因为你有 80px 的填充(左和右)，使用 calc(50%-80px) 这样你就可以创建 50% - 8px 的宽度。

试试这个:

* {
  padding: 0;
  margin: 0;
}

.section {
  width: 100%;
  text-align: center;
  padding: 50px 0 50px 80px;
}

.sub-section {
  margin: 0;
  padding: 0;
  width: auto;
  display: inline-block;
  width: calc(50% - 80px);
}

.sub-section-img {
  display: inline-block;
  width: calc(50% - 80px);
}

.sub-section-img img {
  width: 100%;
  height: 80vh;
}

<section class="section section-light">
  <div class="sub-section">
    <h2>Section 1</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
      Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
      alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
    </p>
  </div>
  <div class="sub-section-img">
    <img src="http://lorempixel.com/200/200/" alt="scene1image.png">
  </div>
  
</section>

编辑:

1) 使用 vh 添加了新的 CSS 规则。现在，您可以将图像高度设置为准确的高度。您必须反复试验以适应您想要的确切高度，只需增加/减少 height: 80vh 中的值即可。

2) 删除了右侧的填充，因为您希望图像位于边缘。更改了 .section css 中的值。

3) 如果您希望图像右侧完全没有间隙，请添加 CSS 重置(删除默认的填充和边距)。

* {
padding: 0;
margin: 0;
}