表单区块与带图片文本区块的布局定位实现求助

Hey Kyrylo, 别慌！我完全懂你对着任务卡壳、越看越懵的感觉，咱们一步步来搞定这个需求——把带标题和图片的文本区块放在左边，表单放在右边，两者之间保持188px的间距。

问题分析 #

你目前的代码里尝试用calc(50% - 188px)来设置两个区块的宽度，但这个计算逻辑有问题，而且父容器没配置合适的布局方式，导致两个元素没法并排显示。咱们用Flex布局就能轻松实现这个效果。

具体修改步骤 #

1. 给父容器添加Flex布局

首先给包裹两个区块的.rent-yacht-block设置Flex布局，直接用gap属性来控制两个区块之间的188px间距：

.rent-yacht-block {
  display: flex;
  gap: 188px; /* 这就是你需要的188px左右间距 */
  align-items: flex-start; /* 让两个区块顶部对齐，避免内容被不必要拉伸 */
}

2. 修正子元素的宽度设置

去掉你之前给.rent-yacht-image和.rent-yacht-form-container设置的width: calc(50% - 188px)，换成更合理的宽度配置：

.rent-yacht-image {
  flex: 1; /* 让左边的文本+图片区块占据剩余可用空间，自适应宽度 */
}

.rent-yacht-form-container {
  width: 443px; /* 因为你的表单输入框都是443px宽，这里设置固定宽度刚好匹配 */
}

3. 优化标题的样式

你之前给.rent-yacht-heading设置了固定宽高，可能会导致标题换行异常，建议去掉固定宽高，让它自适应内容：

.rent-yacht-heading {
  /* 移除width: 282px; height: 132px; */
  color: var(--white-cl);
  font-family: DM Sans;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 66px;
  letter-spacing: -2.7px;
  margin-bottom: 64px;
}

4. 修正HTML结构的类名冲突

你在表单内部重复使用了.rent-yacht-form-container类，这会和外层的表单容器样式冲突，建议把表单内的每个输入项容器换成新类名，比如.form-group：

<form class="rent-yacht-form">
  <div class="form-group">
    <label for="user-name" class="rent-yacht-input-label"></label>
    <div class="rent-yacht-input-container">
      <input type="text" placeholder="Full Name" name="user-name" id="user-name" class="rent-yacht-input" />
    </div>
  </div>
  <div class="form-group">
    <label for="user-email" class="rent-yacht-input-label"></label>
    <div class="rent-yacht-input-container">
      <input type="email" placeholder="Email" class="rent-yacht-input" />
    </div>
  </div>
  <div class="form-group">
    <label for="user-phone" class="rent-yacht-input-label"></label>
    <div class="rent-yacht-input-container">
      <input type="tel" placeholder="Phone Number" class="rent-yacht-input" />
    </div>
  </div>
  <div class="rent-yacht-textarea-container">
    <label for="user-comment" class="rent-yacht-input-label"></label>
    <textarea
      name="user-comment"
      id="user-comment"
      cols="30"
      rows="10"
      placeholder="Comment"
      class="rent-yacht-textarea"
    ></textarea>
  </div>
  <button class="rent-yacht-send-button" type="submit">
    Send<svg class="send-arrows-icon" width="18" height="8">
      <use href="../img/icons.svg#icon-arrow-right"></use>
    </svg>
  </button>
</form>

额外小提示 #

刚学布局的时候，Flex布局是非常好用的工具，你可以多熟悉display: flex、gap、flex、align-items这些基础属性的作用，多调整测试几次，很快就能掌握这种左右布局的实现啦！

备注：内容来源于stack exchange，提问作者Kyrylo