求助：如何实现文本左对齐、图片居页面右侧布局？

你的代码里，右侧图片容器没设置正确的布局规则，导致文本被挤到图片下方，没法实现左文本右图片的效果。以下是修改方案：

修改后的CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  margin: 0;
  background-color: #000;
  color: #eee;
  font-family: Poppins;
  font-size: 12px;
}

a {
  text-decoration: none;
}

.carousel .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
}

.carousel .list .item img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
  /* 添加flex布局实现横向排列 */
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* 设置右侧图片容器样式 */
.carousel .list .item .content .img_right {
  flex-shrink: 0; /* 防止图片被压缩 */
  width: 30%;
}

.carousel .list .item .content .img_right img {
  width: 100%;
  height: auto; /* 保持图片比例 */
}

.carousel .list .item .title,
.carousel .list .item .topic {
  font-size: 5em;
  font-weight: bold;
  line-height: 1.3em;
}

.carousel .list .item .topic {
  color: #f1683a;
}

修改后的HTML代码 #

<!-- carousel -->
<div class="carousel">
  <!-- list item -->
  <div class="list">
    <div class="item">
      <img src="https://placehold.co/800x800" />
      <div class="content">
        <div class="text-content">
          <div class="title">text-text</div>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="img_right">
          <img src="https://placehold.co/600x400" />
        </div>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 给.content添加display: flex和align-items: flex-start，让文本和图片横向排列并顶部对齐
• 给.img_right设置flex-shrink: 0避免图片被压缩，同时固定宽度占比，确保它始终在右侧
• 用.text-content包裹文本部分，让布局结构更清晰，文本会自动填充左侧剩余空间
• 调整最上层图片的选择器（:first-child），避免影响右侧图片样式
• 去掉原有的padding-right，改用gap控制文本和图片的间距

这样修改后，就能实现文本左对齐、图片固定在右侧的预期布局。

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