如何使用 flex 让一个 div 向左对齐跨越所有高度，两个 div 在背景 div 内向右对齐顶部和底部？

Question

所以我有 4 个 div，其中一个是充当“背景”div 的父级，以及该 div 内的其他 3 个 div。我想将较大的一个向左对齐并使其跨越 div 的整个高度。我想将两个较小的对齐到右侧，第一个在顶部，第二个在底部。我怎样才能用flex来实现这个目标？

这就是我想要的：

这是我目前拥有的代码：

.brown {
    display: flex;
    width: 300px;
    height: 170px;
    background: brown;
}
.yellow {
    background: yellow;
}
.green {
    background: green;
}
.blue {
    background: blue;
}

<div class="brown">
    <div class="yellow">
    <div class="green">
    <div class="blue">
</div>

我也在使用 bootstrap，所以如果我可以只使用 bootstrap util 类来做到这一点，那就太棒了。

提前致谢！

Answer 1

建议

如果使用bootstrap的flex，你想要的布局如下

.brown {
  display: flex;
  width: 300px;
  height: 170px;
  background: brown;
}

.yellow {
  background: yellow;
  width: 190px;
  height: 100%;
}

.green {
  background: green;
  width: 100px;
  height: 50px;
}

.blue {
  background: blue;
  width: 100px;
  height: 50px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="brown d-flex justify-content-between">
      <div class="yellow"></div>
      <div class="right d-flex flex-column justify-content-between">
        <div class="blue"></div>
        <div class="green"></div>
      </div>
    </div>
  </body>
</html>

如何使用 flex 让一个 div 向左对齐跨越所有高度，两个 div 在背景 div 内向右对齐顶部和底部？

问题描述投票：0回答：1

1个回答

建议

最新问题

如何使用 flex 让一个 div 向左对齐跨越所有高度，两个 div 在背景 div 内向右对齐顶部和底部？

问题描述 投票：0回答：1

1个回答

建议

最新问题

问题描述投票：0回答：1