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％。但是由于您的填充（左右）为80像素，请使用calc(50%-80px)，以便创建50％的宽度-8像素。

尝试一下：

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

文字Div和Image Div在Parallax网站中并排

1 个答案: