代码之家 › 专栏 › 技术社区 › WomenWhoCode

底部对齐父div内的2个div(同时保持一个子div在另一个子div的顶部)

flexbox sass css html

WomenWhoCode · 技术社区 · 5 年前

我有三个div:

<div class="parent"> 
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>

CSS:

.parent {
  height: 500px;
  width: 500px;
  position: relative;
}

.child1, .child2 {
  height: 100px;
  width: 100px;
}

我需要对齐 child2 div位于底部 .parent div,而 child1 div应该在顶部 儿童2 div。

所以,两者 儿童1 和 儿童2 应该与父div底部对齐,但是 儿童1 应该在上面 儿童2 .

我怎样才能做到这一点?如果只有一个子div,可以通过设置来实现 position: absolute; bottom:0 ,但我无法确定是否有2个子div,并且一个子div应该位于另一个子div之上。

1 回复 | 直到 5 年前

khan 5 年前

您可以在以下设备上使用Flexbox .parent 并应用以下样式:

.parent {
  /* Introduce Flexbox */
  display: flex;

  /* Establishes the y-axis as the main axis.
     This displays the children from top to bottom */
  flex-direction: column;

  /* Packs the children from the end of the main axis */
  justify-content: flex-end;
}

.parent {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid black;
}

.child1,
.child2 {
  height: 100px;
  width: 100px;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

<div class="parent">
  <div class="child1"> </div>
  <div class="child2"> </div>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

3 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

3 年前

alan · 有没有办法向flexbox图像添加链接?

3 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

3 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前