如何使用HTML和CSS创建L形Div？Div1呈L形，Div2填充剩余区域

可以通过CSS Grid或Flexbox两种方式实现你要的布局，以下是具体代码示例：

方案一：CSS Grid（推荐，适合将Div1作为整体L形） #

这种方式通过网格区域合并直接实现L形结构，自适应能力强。

HTML结构 #

<div class="layout-container">
  <div class="div-l-shape">DIV 1 (L形)</div>
  <div class="div-fill">DIV 2 (填充剩余区域)</div>
</div>

CSS样式 #

.layout-container {
  display: grid;
  /* 定义网格区域：第一行是L形顶部+Div2，第二行是L形底部+Div2 */
  grid-template-areas: 
    "l-top fill-area"
    "l-bottom fill-area";
  /* 第一列宽度自适应L形内容，第二列占满剩余宽度 */
  grid-template-columns: auto 1fr;
  /* 行高自适应内容高度 */
  grid-template-rows: auto auto;
  /* 可选：设置元素间间距 */
  gap: 8px;
  width: 100%;
  /* 示例最小高度，可根据需求调整 */
  min-height: 280px;
}

.div-l-shape {
  /* 合并左上角和左下角的网格区域，形成L形 */
  grid-area: l-top / l-top / l-bottom / l-top;
  background-color: #e0e0e0;
  padding: 1.2rem;
}

.div-fill {
  grid-area: fill-area;
  background-color: #f5f5f5;
  padding: 1.2rem;
}

当容器宽度变化时，L形Div的宽度会自动适配自身内容，Div2会实时填充剩余的所有空间，完全满足自适应需求。

方案二：Flexbox（适合L形上下部分需独立样式的场景） #

如果需要给L形的上下部分设置不同样式，可以用Flex嵌套的方式实现：

HTML结构 #

<div class="flex-container">
  <div class="l-shape-wrapper">
    <div class="l-top">DIV 1 上部分</div>
    <div class="l-bottom">DIV 1 下部分</div>
  </div>
  <div class="fill-div">DIV 2</div>
</div>

CSS样式 #

.flex-container {
  display: flex;
  /* 禁止换行，保证L形和填充区域在一行 */
  flex-wrap: nowrap;
  width: 100%;
  min-height: 280px;
  gap: 8px;
}

.l-shape-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.l-top, .l-bottom {
  background-color: #e0e0e0;
  padding: 1.2rem;
  /* 可选：防止内容换行，保持宽度稳定 */
  white-space: nowrap;
}

.fill-div {
  /* 让Div2占满剩余所有宽度 */
  flex: 1;
  background-color: #f5f5f5;
  padding: 1.2rem;
}

两种方案都能实现宽度变化时的自适应调整，你可以根据实际需求选择。

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