如何让倾斜div与父容器等高？实现双栏斜切分隔布局

要实现双栏倾斜分隔的横幅布局，解决浮动元素高度不足导致文本跑到下方的问题，可通过以下CSS调整实现：

修改后的HTML #

<div class="container">
  <div class="floated-div">
    <img src="你的图片地址" class="shape-element" alt="横幅图片"/>
  </div>
  <div class="txt">
    <p>
Nulla semper, est suscipit eleifend pharetra, leo ipsum vestibulum turpis, in tempus libero est quis felis. Nullam auctor id odio ac rhoncus. Aenean quis urna dapibus ligula vehicula ornare sed tempus purus. Aenean pharetra, ipsum sed ornare eleifend, purus risus aliquam diam, non ullamcorper mi purus quis lacus.
    </p>
  </div>
</div>

修改后的CSS #

.container {
  background-color: red;
  display: flow-root;
  min-height: 400px; /* 设置最小高度，确保容器有足够空间承载内容 */
}

.floated-div {
  float: left;
  width: 50%; /* 固定左侧栏宽度 */
  height: 100%; /* 强制占满容器高度 */
  shape-outside: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); /* 定义倾斜的多边形路径，控制文本环绕形状 */
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); /* 裁剪内部图片，使其匹配倾斜形状 */
}

.shape-element {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应容器，避免拉伸变形 */
}

.txt {
  padding: 2.5rem; /* 控制文本与倾斜分隔线的间距 */
}

核心调整说明 #

• 给.container设置min-height，确保容器高度稳定，避免浮动元素高度随内容收缩。
• 让.floated-div占满容器高度，同时通过shape-outside定义倾斜路径，引导文本沿倾斜边缘对齐；用clip-path同步裁剪图片，让左侧栏呈现剃刀式倾斜效果。
• 用object-fit: cover保证图片在倾斜容器内正常显示，不会出现拉伸或留白问题。
• 替换shape-margin为文本容器的内边距，更直观控制文本与分隔线的距离。

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