如何将页面中央两个区块设为各占一半？解决文本截断图片问题

问题根源 #

1. .wrapper 使用 inline-flex 会让容器仅包裹内容，无法占满页面宽度，自然没法给两个子元素分配50%的空间
2. 未给文本区和图片区设置明确的宽度分配规则，导致文本挤压图片
3. 图片容器的宽度设置不合理，无法自适应分配的空间

修正后的代码 #

CSS 代码 #

/* 外层容器确保占满宽度 */
.wrapper-container {
  width: 100%;
}

.wrapper {
  display: flex; /* 替换inline-flex，让容器占满父元素宽度 */
  width: 100%;
}

.text__main {
  padding: 10px;
  flex: 1; /* 分配一半可用空间 */
  /* 可选：设置最小宽度避免窗口过小时文本过度挤压 */
  min-width: 300px;
}

.img__central {
  flex: 1; /* 和文本区平分空间 */
  height: 800px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
  display: block; /* 让文本块正常换行，避免和按钮挤在一起 */
  margin: 20px 0;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}

button a {
  color: white; /* 给按钮文字加白色，增强可读性 */
  text-decoration: none;
}

HTML 代码 #

<div class="wrapper-container">
  <div class="wrapper">
    <div class="text__main">
      <h1>Умное образование</h1>
      <span>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non dolorem, autem reiciendis quibusdam mollitia consequatur similique sapiente quia nisi eos optio voluptatibus rem ut voluptates quaerat ad eaque in labore?
      </span>
      <button><a href="">НАчать обучение</a></button>
    </div>
    <div class="img__central">
      <img src="/assets/img/mainslider/02.jpg" alt="Умное образование">
    </div>
  </div>
</div>

关键修改说明 #

• 把 .wrapper 的 display: inline-flex 改成 display: flex 并添加 width: 100%，让容器占满整个可用宽度
• 给 .text__main 和 .img__central 都设置 flex: 1，两个子元素会自动平分 .wrapper 的宽度
• 给 span 添加 display: block 和 margin，优化文本与按钮的排版
• 给按钮内的链接加样式，提升可读性
• 可选：给 .text__main 设置 min-width，防止窗口过小时文本被过度挤压

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