CSS网格与flexbox将内容对齐到底部
我在让网格中的内容正确下载方面遇到了问题。 我添加了一个代码片段来显示我正在尝试做什么。textWrapper内容应始终位于其父.item的底部。我尝试在textWrapper上使用align内容CSS网格与flexbox将内容对齐到底部,css,flexbox,css-grid,Css,Flexbox,Css Grid,我在让网格中的内容正确下载方面遇到了问题。 我添加了一个代码片段来显示我正在尝试做什么。textWrapper内容应始终位于其父.item的底部。我尝试在textWrapper上使用align内容 align-content: flex-end; 但这对我不起作用。我怎样才能使灰色的textWrapper始终位于页面底部 确保浏览器的大小缩小，以便白色图像环绕到下一行。这样，您将看到右侧的灰色textWrapper没有粘在父对象的底部 身体{ 背景：20262E； 字体系列：Helvetic
align-content: flex-end;
您需要将.item div放入一个弹性框中，以便可以对齐它 身体{ 背景：20262E； 字体系列：Helvetica； 宽度：100%； } .组成部分{ 宽度：100%； } .电网{ 显示：网格； 宽度：100%； 网格模板列：重复2，50%； } .项目{ 边框：1px纯绿色； 显示器：flex； 弯曲方向：立柱； 证明内容：之间的空间； } .图像收集{ 显示器：flex； 柔性包装：包装； 证明内容：中心； } .形象{ 宽度：100px； 高度：100px； 边框：1px纯白； } .textWrapper{ 边框：1px纯蓝色； 显示器：flex； 证明内容：中心； 对齐内容：柔性端； 背景颜色：灰色； } .文本{ 文本对齐：居中； 颜色：白色； 宽度：300px； } 这是我的头衔 Lorem ipsum dolor sit amet，是一位杰出的建筑设计师，也是一位临时建筑设计师 这是我的头衔 Lorem ipsum dolor sit amet，是一位杰出的建筑设计师，也是一位临时建筑设计师
您需要将.item div放入一个弹性框中，以便可以对齐它 身体{ 背景：20262E； 字体系列：Helvetica； 宽度：100%； } .组成部分{ 宽度：100%； } .电网{ 显示：网格； 宽度：100%； 网格模板列：重复2，50%； } .项目{ 边框：1px纯绿色； 显示器：flex； 弯曲方向：立柱； 证明内容：之间的空间； } .图像收集{ 显示器：flex； 柔性包装：包装； 证明内容：中心； } .形象{ 宽度：100px； 高度：100px； 边框：1px纯白； } .textWrapper{ 边框：1px纯蓝色； 显示器：flex； 证明内容：中心； 对齐内容：柔性端； 背景颜色：灰色； } .文本{ 文本对齐：居中； 颜色：白色； 宽度：300px； } 这是我的头衔 Lorem ipsum dolor sit amet，是一位杰出的建筑设计师，也是一位临时建筑设计师 这是我的头衔 Lorem ipsum dolor sit amet，是一位杰出的建筑设计师，也是一位临时建筑设计师 只需更改要添加的.item： 这将产生一个HTML标记，用于执行以下操作：
<div class="component">
<div class="grid">
<div class="item">
<!-- Everything within the first div is placed at the top -->
<div>
Everything in here is placed at the top.
</div>
<!-- Everything within the second div is placed at the bottom -->
<div>
Everything in here is placed at the bottom.
</div>
</div>
</div>
</div>
<div class="component">
<div class="grid">
<div class="item">
<!-- Everything within the first div is placed at the top -->
<div>
Everything in here is placed at the top.
</div>
<!-- Everything within the second div is placed at the bottom -->
<div>
Everything in here is placed at the bottom.
</div>
</div>
</div>
</div>
若我想在那个里放另一个div，那个么证明内容的合理性：空格；不起作用。例如，我只希望textWrapper位于底部，而其他两个div位于顶部？@me me我已经更新了我的答案，以包含更多的顶级内容。是的，我想你可以这样做。我说的更多的是在顶级内容之外添加另一个div。基本上是堆叠的。因此，您可以只选择最下面的一个，并将多个其他div堆叠在一起。@请告诉我，据我所知，由于内容属性的限制，这是不可能的。可以使用justify content:space-between将两个元素调整到顶部和底部，但是如果添加第三个元素，则它们将放置在顶部、中间和底部。不幸的是，这是一个限制，因此解决方案是将我们想要的元素放在第一个div的顶部，而将我们想要的元素放在第二个div的底部。如果我想在其中放置另一个div，那么请调整内容：之间的空格；不起作用。例如，我只希望textWrapper位于底部，而其他两个div位于顶部？@me me我已经更新了我的答案，以包含更多的顶级内容。是的，我想你可以这样做。我说的更多的是在顶级内容之外添加另一个div。基本上是堆叠的。因此，您可以只选择最下面的一个，并将多个其他div堆叠在一起。@请告诉我，据我所知，由于内容属性的限制，这是不可能的。可以使用justify content:space-between将两个元素调整到顶部和底部，但是如果添加第三个元素，则它们将放置在顶部、中间和底部。不幸的是，这是一个限制，因此解决方案是将我们想要的元素放在第一个分区的顶部，并将我们想要的元素放在第二个分区的底部。将剪掉的部分向后滚动，以便问题及其答案有意义。以后，请将相关片段添加到新问题中，而不是编辑旧问题。这是一个好主意。将剪掉的片段回滚，使问题及其答案有意义。今后，请在新问题中添加相关片段，而不是编辑旧问题，这是一个好主意。