如何将主文本 div 放在左侧，将 main-img 放在右侧？ main-text 的某些区域应该在 main-img div 之上。和照片里的一样吗？答案

【问题标题】：How can I put the main-text div to the left and main-img to right? The some area of main-text should above the main-img div. Like in the photo?如何将主文本 div 放在左侧，将 main-img 放在右侧？ main-text 的某些区域应该在 main-img div 之上。和照片里的一样吗？
【发布时间】：2022-01-13 02:09:56
【问题描述】：

.main {
  width: 80%;
  margin: auto;
  overflow: auto;
  display: flex;
}

.main-text {
  position: relative;
  width: 674px;
  display: inline-block;
  grid-row: 1/2;
}
   
.main-img {
  float: right;
  position: relative;
  top: 0;
}
    
.main h1 {
  font-size: 54px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

<div class="main">
  <div class="main-text">
    <h1>Find your custom matched commercial real estate space.</h1>
    <p>
      In oculis quidem exercitus quid ex ea consequatur? autem vel eum
      fugiat, quo pertineant ero tibique
    </p>
    <form action="/action_page.php">
      <input
        type="email"
        id="email"
        name="email"
        placeholder="&#xf003; Your email address"
        style="font-family: Arial, FontAwesome"
      />
      <input type="submit" value="Subscribe" />
    </form>
  </div>
  <div class="main-img"><img src="building.png" alt="building" /></div>
</div>

大家好我想克隆 CutSpace 网站。

如何将主文本 div 放在左侧，将 main-img 放在右侧？主要文本的某些区域应该在 main-img div 之上。喜欢照片上的吗？

【问题讨论】：

在.main-text 上尝试float: left。

标签： html css css-float overlap

【解决方案1】：

我会在主布局中使用一个网格，然后在标题上使用一个负的右边距让它伸展到右列的空间中，最后在左列上放一个正的 z-index 来得到它显示在右列的前面。

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.main-text {
  z-index: 10;
}
   
.main-img img {
  max-width: 100%;
  border-radius: 1em;
}
    
.main h1 {
  font-size: 54px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin-right: -30%;
  border: 1px solid red;
}

<div class="main">
  <div class="main-text">
    <h1>Find your custom matched commercial real estate space.</h1>
    <p>
      In oculis quidem exercitus quid ex ea consequatur? autem vel eum
      fugiat, quo pertineant ero tibique
    </p>
    <form action="/action_page.php">
      <input
        type="email"
        id="email"
        name="email"
        placeholder="&#xf003; Your email address"
        style="font-family: Arial, FontAwesome"
      />
      <input type="submit" value="Subscribe" />
    </form>
  </div>
  <div class="main-img"><img src="https://cdn.britannica.com/73/114973-050-2DC46083/Midtown-Manhattan-Empire-State-Building-New-York.jpg" alt="building" /></div>
</div>

【讨论】：