如何将.right容器移至屏幕右侧与左侧图片并排布局？

问题核心是当前.right和.content是同级元素，.content作为flex容器只包含左侧图片，导致右侧内容无法和图片并排。只需调整HTML结构并优化CSS即可实现需求，完全不需要绝对定位：

1. 调整HTML结构 #

把整个.right容器移到.content内部，作为第二个子元素，让.content这个flex容器同时管理左侧图片和右侧内容：

<div class="content">
  <div class="picture">
    <div class="logo">
      <img src="odin.png" class="odinPic">
      <h1 class="odin">ODIN</h1>
    </div>
  </div>
  <!-- 将.right移入.content容器内 -->
  <div class="right">
    <div class="dummyText left">
      <p>This is not a real online service! You know you need someting like this in your life to help you realizer your deepest dreams.</p>
      <p>Sign up <em>now</em> to get started.</p>
      <p class="otherText">You <em>know</em> you want to.</p>
    </div>
    <form action="#">
      <div class="form left">
        <p class="formTitle">Let's do this!</p>
        <div class="input">
          <label for="first-name">First Name</label>
          <input type="text" name="first-name" id="first-name" required>
        </div>

        <div class="input">
          <label for="last-name">Last Name</label>
          <input type="text" name="last-name" id="last-name" required>
        </div>

        <div class="input">
          <label for="email">Email</label>
          <input type="text" name="email" id="email" required>
        </div>

        <div class="input">
          <label for="phone-number">Phone Number</label>
          <input type="text" name="phone-number" id="phone-number" minlength="10" maxlength="10">
        </div>
      </div>
      <div class="left button"><button type="submit">Join</button></div>
    </form>
    <div class="login left">
      <p>Already have a member?</p><a href="#">Log In</a></div>
  </div>
</div>

2. 优化CSS样式 #

调整.content的flex属性，确保两个子元素并排且高度一致，同时优化图片容器的显示效果：

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.content {
  width: 100vw;
  height: 100vh;
  /* 设置flex不换行，让子元素高度拉伸一致 */
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.logo {
  display: flex;
  flex-flow: row wrap;
}

/* Left Side */
.picture {
  background-image: url(picture.jpg);
  background-position: center;
  /* 用cover让背景图片填满容器 */
  background-size: cover;
  background-repeat: no-repeat;
  width: 40vw;
  /* 设置高度为100vh，和右侧内容高度匹配 */
  height: 100vh;
}

.logo {
  background-color: rgba(0, 0, 0, .75);
  height: auto;
  position: relative;
  top: 20vh;
  gap: 1vw;
  padding: 15px;
  justify-content: center;
  align-items: center;
}

h1 {
  color: white;
  font-size: 3vw;
}

.odinPic {
  height: 10vh;
}

/* Right Side */
.right {
  width: 60vw;
  background-color: rgb(243, 240, 239);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  /* 继承父容器的拉伸属性，自动匹配左侧高度 */
}

.left {
  padding-left: 3vw;
}

.dummyText {
  font-weight: 500;
  width: 90%;
  font-size: 1.2rem;
}

.otherText {
  margin: 40px 0 80px;
}

/* Form */
.form {
  background-color: white;
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .75);
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.input {
  display: flex;
  flex-flow: column wrap;
  width: 40%;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 50%;
}

.formTitle {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 500;
}

input {
  background-color: white;
  border: 1px solid rgb(66, 66, 66);
  border-radius: 4px;
}

input:focus {
  outline: none;
  border: 2px solid black;
}

button {
  background-color: #596D48;
  color: white;
  font-weight: 700;
  font-size: 1.2em;
  border: 2px solid rgb(66, 66, 66);
  border-radius: 5px;
  padding: 10px 40px;
  margin: 40px 0;
}

button:hover {
  background-color: white;
  color: black;
}

.login {
  display: flex;
  gap: 5px;
}

a {
  text-decoration: none;
  color: #596D48;
  font-weight: 700;
}

a:hover {
  color: black;
}

修改说明 #

• 结构调整后，.content作为父容器，通过flex布局将左侧图片和右侧内容横向排列，row nowrap确保不会换行
• align-items: stretch让两个子元素自动填满父容器的高度，实现高度一致的效果
• .picture设置height:100vh并配合background-size: cover，保证背景图片填满左侧容器，避免显示不全
• .right作为flex子元素，默认继承父容器的高度属性，无需额外设置

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