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

显示flex,对齐容器右下角的div

flexbox css3 css html

Radex · 技术社区 · 8 年前

我需要在它的红色容器“content”的右下角显示黄色div“icon”。

.root {
    display: inline-flex;
    background-color: red;
}

.content {
    display: flex;
    align-items: centerl;
    justify-content: centerl;
    height: 80px;
    width: 100%;
    background-color: red;
}

.icon {
    position: absolute;
    right: 0;
    bottom:0;
    background-color: yellow;
}

<div class="root">
    <div class="content">
        content
    </div>
    <div class="icon">
      icon
    </div>
</div>

3 回复 | 直到 8 年前

Vikas Jadhav 8 年前

而不是使用flex end属性可以实现的位置 align-self: flex-end;

请参见下面的代码段:

.root {
  display: inline-flex;
  background-color: red;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
  background-color: red;
}

.icon {
   align-self: flex-end;
   background-color: yellow;
}

<div class="root">
  <div class="content">
    content
  </div>
  <div class="icon">
    icon
  </div>
</div>

Lucas Paz 8 年前

.root {
  display: inline-flex;
  background-color: red;
  position: relative;
}

.content {
  display: flex;
  align-items: centerl;
  justify-content: centerl;
  height: 80px;
  width: 100%;
  background-color: red;
}

.icon {
  position: absolute;
  right: 0;
  bottom:0;
  background-color: yellow;
}

<div class="root">
  <div class="content">
    content
  </div>
  <div class="icon">
    icon
  </div>
</div>

position: relative;

yunzen 8 年前

在您呈现的HTML结构中 .icon 元素不是这个 .container 元素。所以这和它没有关系。如果你改变结构 .容器 要素 position: relative ,它会起作用的。

.root {
  display: inline-flex;
  background-color: red;
}

.content {
  display: flex;
  align-items: centerl;
  justify-content: centerl;
  height: 80px;
  width: 100%;
  background-color: red;
  position: relative;
}

.icon {
  position: absolute;
  right: 0;
  bottom:0;
  background-color: yellow;
}

<div class="root">
  <div class="content">
    content
    <div class="icon">
      icon
    </div>
  </div>
</div>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前