如何将文本放置在幻灯片旁边

Question

我最近在图像中添加了幻灯片，以前的布局使图像位于左上角，文本容器中的文本位于右侧，但现在文本位于底部。

我修改了 CSS，使用了一些 AI 工具并尝试了重构，但无法弄清楚。我毫不怀疑这很简单，就像通常一样，但我想尽快修复它。

.left {
  float: left;
}

.slide-show-container {
  max-width: 50%;
  position: relative;
  margin: auto;
  margin-left: 0;
  float: left;
  display: flex;
}

.mySlides {
  display: none;
  max-width: 100%;
  position: relative;
}

.mySlides:first-of-type {
  display: block;
}

.image-text-container {
  display: flex;
  flex-direction: row;
  float: left;
  align-items: flex-start;
  margin-right: 40%;
  justify-content: space-between;
}

.image-container {
  flex-basis: 40%;
  margin-right: 20%;
}

.image-container img {
  max-width: 100%;
  height: auto;
}

.text-container {
  flex: 1;
  min-width: 50%;
  margin-left: 20px;
}

.text-container p {
  margin: 10px, 0;
  padding: 0;
}

.photo-type {
  width: 100%;
  height: auto;
  object-fit: contain;
  left: auto;
  padding-right: 20px;
}

<div class="container-fluid" id="welcomeBar">
  <h1 id="homeTitle">Welcome to the Website</h1>
  <label id="date"></label>
</div>
<script src="script.js"></script>
<div class="container-fluid" id="home">
  <h1 id="homeHeader">header</h1>
  <div class="image-text-container">
    <div class="slide-show-container">

      <div class="mySlides">
        <div class="image-container">
          <div class="numbertext">1 / 3</div>
          <img src="photo1" class="photo-type" />
          <figcaption>text</figcaption>
        </div>
      </div>

      <div class="mySlides">
        <div class="image-container">
          <div class="numbertext">2 / 3</div>
          <img src="photo2" class="photo-type" />
          <figcaption>text</figcaption>
        </div>
      </div>

      <div class="mySlides">
        <div class="image-container">
          <div class="numbertext">3 / 3</div>
          <img src="photo3" class="photo-type" />
          <figcaption>text</figcaption>
        </div>
      </div>

      <a class="prev" onclick="plusSlides(-1)">❮ PREV</a>
      <a class="next" onclick="plusSlides(1)">❯ NEXT</a>

    </div>
  </div>

  <div class="text-container">
    <p>text here</p>
  </div>
</div>
</div>
</div>

Answer 1

您可能刚刚混淆了 HTML 的结构。您有太多结束

</div>

标签，并且

.text-container

不在代码中的

.image-text-container

内，而它可能应该是这样。以下调整后的版本将文本显示在

.slide-show-container

的右侧（这在这里不起作用，因为我没有您使用的图片和 JavaScript）。我没有对 CSS 进行任何更改。

.left {
  float: left;
}

.slide-show-container {
  max-width: 50%;
  position: relative;
  margin: auto;
  margin-left: 0;
  float: left;
  display: flex;
}

.mySlides {
  display: none;
  max-width: 100%;
  position: relative;
}

.mySlides:first-of-type {
  display: block;
}

.image-text-container {
  display: flex;
  flex-direction: row;
  float: left;
  align-items: flex-start;
  margin-right: 40%;
  justify-content: space-between;
}

.image-container {
  flex-basis: 40%;
  margin-right: 20%;
}

.image-container img {
  max-width: 100%;
  height: auto;
}

.text-container {
  flex: 1;
  min-width: 50%;
  margin-left: 20px;
}

.text-container p {
  margin: 10px, 0;
  padding: 0;
}

.photo-type {
  width: 100%;
  height: auto;
  object-fit: contain;
  left: auto;
  padding-right: 20px;
}

<div class="container-fluid" id="welcomeBar">
    <h1 id="homeTitle">Welcome to the Website</h1>
    <label id="date"></label>
</div>
<script src="script.js"></script>
<div class="container-fluid" id="home">
    <h1 id="homeHeader">header</h1>
    <div class="image-text-container">
        <div class="slide-show-container">

            <div class="mySlides">
                <div class="image-container">
                    <div class="numbertext">1 / 3</div>
                    <img src="photo1" class="photo-type" />
                    <figcaption>text</figcaption>
                </div>
            </div>

            <div class="mySlides">
                <div class="image-container">
                    <div class="numbertext">2 / 3</div>
                    <img src="photo2" class="photo-type" />
                    <figcaption>text</figcaption>
                </div>
            </div>

            <div class="mySlides">
                <div class="image-container">
                    <div class="numbertext">3 / 3</div>
                    <img src="photo3" class="photo-type" />
                    <figcaption>text</figcaption>
                </div>
            </div>

            <a class="prev" onclick="plusSlides(-1)">❮ PREV</a>
            <a class="next" onclick="plusSlides(1)">❯ NEXT</a>

        </div>
        <div class="text-container">
            <p>text here</p>
        </div>
    </div>
</div>