首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在父div中底部对齐2个div (同时将一个子div放在另一个子div之上)

要在父div中底部对齐两个div,并将一个子div放在另一个子div之上,可以使用CSS的flexbox布局来实现。

首先,需要给父div设置display属性为flex,这样父div的子元素会按照一行排列。

然后,给父div设置justify-content属性为flex-end,这样两个子div就会在父div的底部对齐。

接下来,将一个子div放在另一个子div之上,可以使用CSS的position属性和z-index属性。

给父div的position属性设置为relative,这样子元素的定位会相对于父元素进行。

给第一个子div设置position属性为absolute,这样它会脱离文档流,并且可以使用top、bottom、left、right属性来调整它的位置。

给第二个子div设置position属性为relative,这样它会相对于父div进行定位。

下面是示例代码:

HTML代码:

代码语言:txt
复制
<div class="parent">
  <div class="child1">子div1</div>
  <div class="child2">子div2</div>
</div>

CSS代码:

代码语言:txt
复制
.parent {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.child1 {
  position: absolute;
  top: 0;
}

.child2 {
  position: relative;
  z-index: 1;
}

这样,两个子div就会在父div的底部对齐,并且第一个子div会放在第二个子div之上。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云产品:https://cloud.tencent.com/product
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iot
  • 腾讯云移动开发(移动推送、移动分析、移动测试等):https://cloud.tencent.com/product/mobile
  • 腾讯云数据库(MySQL、Redis、MongoDB等):https://cloud.tencent.com/product/db
  • 腾讯云区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云音视频处理(VOD):https://cloud.tencent.com/product/vod
  • 腾讯云网络安全(DDoS防护、Web应用防火墙等):https://cloud.tencent.com/product/saf
  • 腾讯云CDN加速(CDN):https://cloud.tencent.com/product/cdn
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS Flexbox 布局完全指南 ():4000字,多示例讲解

除了能得到个免费的响应式图片集外,使用 Flexbox 的另一个优势就是它的对齐选项。... 现在已经有了元素。在这个例子元素充满整个视图。...卡片在页面内靠左上角对齐,因为 justify-content 的值默认为 flex-start。 同时,卡片垂直拉伸充满整个元素的高度,因为 align-items 的默认值是 stretch。...应用 .row\_cell — top 类可以让特定的元素 row 内靠顶部对齐定有标识文本给特定元素加上这个类。...整行的三个元素都靠底部对齐 嵌套网格 只需要简单的设置,rows(行元素)就可以嵌套布局。 ? 行内有两个元素,其中个是另一个的两倍大小。

4.5K20

【CSS3】CSS3 3D 转换示例 - 3D 导航栏示例 ( 列表设置 | 透视视图 | 过渡动画 | 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型的效果 )

鼠标移动到 盒子模型上方时 , 会显示 .box:hover 样式 ; 设置两个子盒子模型的效果 容器设置 相对定位 , 根据 子绝相 原则 , 子盒子使用了绝对定位 , 盒子就要使用相对定位...; 第个子容器 显示正面 , 为了保证 X 轴是中心线 , 正面盒子 沿着 Z 轴向 视点 移动 , 这样整个 盒子 进行 旋转时 , 旋转中心 恰好 是 中心位置 ; 第二个子容器 显示底部.../* 第个子盒子 正常显示正面 */ background-color: red; /* 为了保证 X 轴是中心线 , 正面盒子 沿着 Z 轴向 视点.../ font-size: 30px; /* 设置文字颜色 */ color: #fff; /* 设置文字盒子水平对齐...*/ text-align: center; /* 设置文字盒子垂直对齐 */ line-height: 100px;

19010
  • 【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    、连续排列的链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度的 1/3 ; 2、标签结构设置 布局的 三个 链接图片..., 放置 单独的 标签 , 每个 标签中放置个 链接标签 , 链接标签包裹个 图片 ; <img src=..., 三个链接图片水平排列在起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置的 , 为容器的三个子元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素的宽度 ,...如果子元素横向累加宽度超过 当前宽度 , 会自动换行 , 因此这里为每个子元素设置个 1/3 宽度 , 即 33.33% ; 子元素 设置浮动和宽度的样式如下 : .brand div

    3.6K20

    二、CSS

    CSS盒子模型 盒子模型解释  元素页面显示成个方块,类似个盒子,CSS盒子模型就是使用现实盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下: ?...,需要清除浮动 7、浮动元素之间没有垂直margin的合并 清除浮动 级上增加属性overflow:hidden 最后个子元素的后面加个空的div,给它样式属性 clear:both(不推荐)...-- 第2个子元素div匹配 -->  2、E:nth-last-child(n):匹配元素类型为E且是元素的倒数第n个子元素(与上项顺序相反) 3、E:first-child:匹配元素类型为E且是元素的第个子元素...4、E:last-child:匹配元素类型为E且是元素的最后个子元素 5、E:only-child:匹配元素类型为E且是元素的子元素 6、E:nth-of-type(n):匹配元素的第n...(最后个关键帧定义) backwards animation-delay 所指定的段时间内,动画显示之前,应用开始属性值(个关键帧定义) both 向前和向后填充模式都被应用 10

    1.8K70

    CSS 实用手册

    内联方式,又称为行内样式,样式定义某 html 元素(style 属性) 语法: 内容部分 ...分类选择器,允许元素选择器和类选择器放在起进行声明定义,以便达到对某种元素不同样式的细分控制 语法:元素选择器、类选择器{样式声明;} div.redColor{ margin:0;...群组选择器,多个选择器放在起,统声明样式 语法:选择器 1,选择器 2,选择器 3{ } #top,redColor ,span,heavy ,div,important{ color...元素,增加空子元素到最后个位置处,并且设置其 clear 属性为 both 弊端:多个子元素页面上 45. position:relative 相对定位,元素会相对于它原来的位置偏移某个距离...弹性布局的潜在问题 ①. input与另一个元素作为子元素弹性布局时,另一元素的宽度如果是按份等分,那么input的宽度将不准确,解决方案是另一元素的宽度设为固定宽度,如百度移动端 ②.

    2.7K10

    CSS布局相关及Flex详解

    float及postion缺点 对于两个div元素,其是相对独立的,如果在其中div元素中加入内容,将会使得两个元素的底部不能对齐,导致页面多出空白区域。 ?...多栏布局 css3加入了多栏布局,可以个元素的内容分为两栏或者多栏显示,并且确保各栏内容的底部对齐。...盒布局可以解决float导致底部对齐的问题;同时可以很好的规避多栏布局宽度必须相等的问题以及解决多栏布局不能指定什么栏显示什么内容的窘境。...:右对齐,从main-end开始布局所有子元素 center: 居中 space-between:个子元素布局main-start处,最后个元素布局main-end处,空白部分平均分配在所有子元素与子元素之间...如果项目未设置高度或设为auto,占满整个容器的高度 align-content:定义了多根轴线的对齐方式,如果项目只有根轴线,那么该属性将不起作用 项目属性 改变排序顺序 order:定义项目容器的排列顺序

    1.4K51

    flex 布局通过使用 margin 实现水平垂直居中以及其他常见的前端布局

    它的工作原理是: Flexbox 布局,margin: auto; 会根据容器的剩余空间自动调整元素的外边距,直到子元素居中。...Flexbox 布局,margin: auto; 具有更多的灵活性,可以同时实现水平和垂直居中对齐。...2.2 实现更多实际开发的布局 示例 1:实现子元素部分集中 实际开发,我们常遇到这样种需求:元素水平分布容器内,其中某些元素需要靠近在起,与其他元素保持定的自适应距离。...示例 2:实现等宽子项的平均分布 很多情况下,我们需要将商品卡片或其他内容等宽地分布,使每个子项都具有相同的宽度并且平均分布,每行都是从左到右。...这种布局通常用于网格展示或商品列表等场景,确保每个子视觉上统且整齐。

    12910

    关于 CSS margin,些让你模糊的点

    以下情况下,margin 会重叠: 相邻的兄弟姐妹 完全空盒子 元素和第个或最后个子元素 依次来看看这些场景。...除了下面提到的情况之外,如果有两个元素正常流依次显示,那么第个元素的底部 margin 将与下面元素的顶部 margin 起重叠。 在下面示例,有三个div元素。...对于元素和第个或最后个子元素 margin 重叠,如果我们向级添加border,则子级上的margin会保留在内部。...如果我们再看元素和第个或最后个子元素的示例,可以 wrapper 元素加上 display: flow-root就会创建个新的BFC,从而阻止 margin 合并 ... .wrapper {...overflow属性的值设为auto也会产生同样的效果,因为这也创建了个新的BFC,尽管它也可能创建某些场景不需要的滚动条。

    1.3K20

    关于css margin,你需要知道的

    以下情况下,margin 会重叠: 相邻的兄弟姐妹 完全空盒子 元素和第个或最后个子元素 依次来看看这些场景。...除了下面提到的情况之外,如果有两个元素正常流依次显示,那么第个元素的底部 margin 将与下面元素的顶部 margin 起重叠。 在下面示例,有三个div元素。...对于元素和第个或最后个子元素 margin 重叠,如果我们向级添加border,则子级上的margin会保留在内部。...如果我们再看元素和第个或最后个子元素的示例,可以 wrapper 元素加上 display: flow-root就会创建个新的BFC,从而阻止 margin 合并 ... .wrapper {...overflow属性的值设为auto也会产生同样的效果,因为这也创建了个新的BFC,尽管它也可能创建某些场景不需要的滚动条。

    1.3K40

    CSS-浮动(float)

    定位 盒子定在浏览器的某个位置——CSS 离不开定位,特别是后面的 js 特效。 总结:html当中有个相当重要的概念,标准流或者普通流。...CSS,通过float属性来定义浮动,其基本语法格式如下: 选择器{ float:属性值; } 属性值 描述 none 元素不浮动(默认值) left 元素向左浮动 right 元素向右浮动...# 浮动的元素排列位置 浮动的元素排列位置,跟上个元素(块级)有关系。如果上个元素有浮动,则A元素顶部会和上个元素的顶部对齐;如果上个元素是标准流,则A元素的顶部会和上个元素的底部对齐。...总结: 浮动的目的就是为了让多个块级元素同行上显示。 盒子里面的子盒子,如果其中个子级有浮动的,则其他子级都需要浮动。这样才能对齐显示。...设置或更改个已被呈递的对象的此属性值导致环绕对象的内容重新流动。 <!

    2.1K20

    CSS 布局_2 Flex弹性盒

    ,默认值为 0flex-shrink:1;指定了 flex 元素的收缩规则,子项的收缩所占的份数,默认值为1 当所有子项相加的宽度大于项的宽度,每个子项减少的多出的项宽度的 1/n felx-basis...,值为 (20%,25%] 时,最多 4 个子行,上面的例子 flex-basis 的值为 20%,即每个子项占据该行宽度的 20%,行可排列 5 个子项,但我们共有 10 个子项, 10...个子项都排在行,会导致溢出 flex 容器所以我们级添加了 flex-wrap 属性,指定 flex 元素单行显示还是多行显示,默认不换行,值为 nowrap,指定容器多行显示,值为 wrap,...flex 容器的 main 轴方向上的对齐方式值描述flex-start从行首开始排列,每行第个弹性元素与行首对齐同时所有后续的弹性元素与前对齐flex-end从行尾开始排列,每行最后个弹性元素与行尾对齐...,其他元素将与后对齐center伸缩元素向每行中点排列,每行第个元素到行首的距离将与每行最后个元素到行尾的距离相同space-between每行上均匀分配弹性元素,相邻元素间距离相同,即空白子项之间每行第个元素与行首对齐

    1.5K40

    【CSS3】CSS3 3D 转换示例 - 盒子模型翻转示例 ( 开启透视视图 | 设置过渡动画 | 设置 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型背靠背效果 )

    鼠标移动到 盒子模型上方时 , 会显示 .box:hover 样式 ; 设置两个子盒子模型背靠背效果 容器设置 相对定位 , 根据 子绝相 原则 , 子盒子使用了绝对定位 , 盒子就要使用相对定位...; 第个子容器 显示正面 , 正常设置即可 ; 第二个子容器 显示背面 , 此时需要 绕 Y 轴 翻转 180 度 , 才能贴到背面 ; .box { /...*/ color: #fff; /* 设置文字盒子水平对齐 */ text-align: center;.../* 设置文字盒子垂直对齐 */ line-height: 100px; } .box div:first-child {...-- 盒子 个子盒子 分别是正面 和 背面 翻转的是 盒子 不是 两个子盒子 --> <div

    31800

    CSS学习笔记:表格样式,图片样式【727】

    表格标题位置 语法:caption-side:取值; 默认情况下,表格标题是表格的顶部,属性为:top,如果想把标题放在底部,属性为:bottom。...如果想要定义表格标题的位置,table或caption这两个元素的CSS定义caption-side属性,效果是样的,般情况,我们只table定义就行。...表格边框间距 语法:boreder-spacing:像素值; 图片对齐 图片水平对齐 css中使用text-align来实现图片的水平对齐,其属性值跟文本的样。...图片是元素中进行水平对齐,因此我们是图片的元素定义。 img的元素是div,因此想要实现图片的水平对齐,就应该在div定义text-align属性。...假如在之上只有极少的空间可供浮动元素,那么这个元素会跳至下行,这个过程会持续到某行拥有足够的空间为止。

    1.5K10

    你不知道的 CSS flex 陷阱

    现代Web开发,CSS的Flexbox布局模式,因其灵活性和简洁性而备受推崇。然而,即使是经验丰富的前端开发者,有时也会遇到些令人困惑的问题。...问题描述某次我做项目时候,用到了 flex 布局,布局的页面效果,大概是容器盒子 div 里面,有几个子元素 div,这几个子元素 div 行大概只能放下 3 个,超出就需要换行显示了。.../div> 4 仔细看没毛病啊,我也没有设置对齐方式什么的,这个间距是哪儿来的呢?...两个都是业内非常权威的文档,却因为这个属性,出现了不致的描述。为了验证下,我浏览器用审查元素,查看了下容器盒子的计算属性,发现默认值是 normal。...希望这篇文章能够帮助你解决实际开发的问题,同时对Flexbox布局有更深入的理解。如果你有任何疑问或建议,欢迎评论区与我交流讨论哦。

    33073

    Flex Box布局学习- 语法

    引入弹性盒布局模型的目的是提供种更加有效的方式来对个容器的子元素进行排列、对齐和分配空白空间。 任何个容器都可以指定为Flex布局。 **容器内可以包含个或者多个弹性子元素。...* baseline: 项目的第行文字的基线对齐。 * stretch(默认值):如果项目未设置高度或设为auto,占满整个容器的高度。...,可指定个不带单位的数值,作为容器剩余空间的比例,它表示子元素flex容器可以分配多少可用的空间。...imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### 2. flex-shrink属性 flex-shrink属性表示个子元素必要时是否收缩自己来适应当前的...如果设置为0,那么容器分配分配之前,对每个子元素的默认尺寸都视之为0,剩余空间也就是容器的全部空间,其结果是,直接按照flex-grow值的比例分配子元素整体的大小; 如果设置为auto,那么容器会将每个子元素的内容作为子元素默认尺寸

    79830

    说z-index容易被忽略的那些特性

    HTML文档中有个不变的堆叠准则,任何个元素都可以叠放在其他元素之上或者之下,决定元素叠放顺序的规则其实很清晰。...当元素浮动float时,浮动块元素被放置于非定位块元素与定位块元素之间,具体的讲,浮动元素显示普通流的后代块元素之上,常规流的后代行内元素之下。...通俗的讲,如果某个元素被置于其所在堆叠上下文的最底层,我们是没有办法让它显示另一个拥有更高堆叠顺序的堆叠上下文的元素之上的,哪怕你将其z-index设置为无限大。...堆叠上下文内部的子堆叠上下文的z-index只堆叠上下文中有意义。 最后 阐述完堆叠上下文的形成、堆叠上下文之间的堆叠规则,堆叠上下文内的堆叠顺序后,让我们回到文章最开始的问题。...,red span成为了新的上下文中的第个子元素。

    2K50

    说z-index容易被忽略的那些特性

    HTML文档中有个不变的堆叠准则,任何个元素都可以叠放在其他元素之上或者之下,决定元素叠放顺序的规则其实很清晰。...当元素浮动float时,浮动块元素被放置于非定位块元素与定位块元素之间,具体的讲,浮动元素显示普通流的后代块元素之上,常规流的后代行内元素之下。...通俗的讲,如果某个元素被置于其所在堆叠上下文的最底层,我们是没有办法让它显示另一个拥有更高堆叠顺序的堆叠上下文的元素之上的,哪怕你将其z-index设置为无限大。...堆叠上下文内部的子堆叠上下文的z-index只堆叠上下文中有意义。 最后 阐述完堆叠上下文的形成、堆叠上下文之间的堆叠规则,堆叠上下文内的堆叠顺序后,让我们回到文章最开始的问题。...,red span成为了新的上下文中的第个子元素。

    71220

    CSS 浮动布局,解决清除浮动的问题

    (般是高度不设置),元素内整体浮动的元素无法撑开元素,元素需要清除浮动 7、浮动元素之间没有垂直margin的合并 理解练习 1、两端对齐浮动 float:left 和 float:right...可以从上图看到,里面的两个div是挨在起的,那么如何设置两个div左右两边对齐呢? 此时就需要使用float:left和float:right分别设置下了。 ?...好了,写完了上面的示例,已经知道浮动布局左右对齐的用法了。现在再来看看这第二个示例该怎么写。 首先先把基本页面写上,这次使用ul配合超链接a标签来编写,如下: ?...清除浮动 :子元素设置为浮动,元素无法被撑开的这种情况 级上增加属性overflow:hidden 最后个子元素的后面加个空的div,给它样式属性 clear:both(不推荐) 使用成熟的清浮动样式类...最后个子元素的后面加个空的div,给它样式属性 clear:both(不推荐) 这是种不推荐过时的方法了,可以看看怎么处理。 ? 这种方式为什么不推荐呢?

    2.7K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券