如何将文本定位在幻灯片侧边？布局错位问题求助

核心问题分析 #

1. HTML结构错误：text-container 不在 image-text-container（flex容器）内部，导致flex布局无法控制它的位置，自然会跑到幻灯片下方。
2. 布局属性冲突：slide-show-container 同时使用 float: left 和 display: flex，两种布局机制混用会干扰正常排列；image-text-container 也冗余添加了 float: left，进一步打乱布局逻辑。

修复方案 #

步骤1：修正HTML结构 #

将 text-container 移入 image-text-container 内部，使其成为flex容器的子元素，这样才能和幻灯片容器并排排列。

步骤2：清理冗余CSS属性 #

移除所有干扰flex布局的 float 属性，专注用flex实现并排效果；调整容器的宽度、flex属性，确保空间分配合理。

修改后的完整代码 #

HTML

<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>
    <!-- 把text-container移到这里，成为image-text-container的子元素 -->
    <div class="text-container">
      <p>text here</p>
    </div>
  </div>
</div>

CSS

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

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

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

.image-text-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-right: 20px;
  justify-content: flex-start;
  gap: 20px;
}

.image-container {
  flex-basis: 100%;
}

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

.text-container {
  flex: 1;
  min-width: 30%;
}

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

.photo-type {
  width: 100%;
  height: auto;
  object-fit: contain;
}

关键修改说明 #

• 结构调整：让text-container成为flex容器的子元素，是实现并排的核心前提。
• 清理冲突属性：移除所有float，避免和flex布局冲突；修正text-container p的margin语法错误（原代码用了逗号，应为空格）。
• 优化空间分配：用gap控制容器间距，调整flex和min-width属性，确保在不同屏幕尺寸下布局稳定。

内容的提问来源于stack exchange，提问作者superslushy