时间戳

首页 > 解决方案 > 在父 div 中定位 div

css - 在父 div 中定位 div

问题描述

将两个 div（绿色和黄色）定位在父 div（蓝色轮廓）内的好方法是什么，使其看起来像下面的第二张图？（第一张图是默认情况下 div 的堆叠方式）。

我有许多这样的蓝色 div，它们的绿色 div 是可变高度（不同数量的文本），黄色 div 总是相同的。

我希望黄色 div 始终位于容器的底部。 编辑：忘了提到我所有的蓝色父 div 应该是相同的高度

我尝试将黄色 div 定位为position:absolute与bottom:0蓝色 div 相同，position:relative但这不起作用，因为如果其中一个绿色 div 有很多文本，它将遇到并且文本将与黄色 div 重叠；

蓝色父 div 设置为height:100%

我在这里想念什么？

对不起，如果新手问题，我刚刚进入 CSS 和 UI 设计。

ntdi

标签： csscss-position

解决方案

您可以使用flexbox属性。我只是为片段目的设置了高度。您可以根据自己的喜好更改高度并检查文本。

.parent {
  display: flex; /* Activate Flexbox container */
  flex-direction: column; /* To set the main axis in block direction */
  justify-content: space-between; /* Align them distributed equally from first to last */
  height: 150px;
  width: 200px;
  border: 5px solid #00A2E8;
}

.child1 {
  background: green;
  height: 25%;
}

.child2 {
  background: yellow;
  height: 25%;
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

推荐阅读