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

将不同的div放置在父div的底部,与其他div相邻

要将不同的div放置在父div的底部,并与其他div相邻,可以使用CSS的定位属性来实现。以下是一种常用的方法:

  1. 首先,确保父div的position属性为relative或absolute,以便作为参考点。
  2. 对于要放置在底部的div,设置position属性为absolute,并将bottom属性设置为0,以将其定位到父div的底部。
  3. 对于其他相邻的div,可以使用margin属性来控制它们与底部div的间距。

下面是一个示例代码:

代码语言:html
复制
<style>
    .parent {
        position: relative;
        height: 200px;
        border: 1px solid black;
    }

    .bottom-div {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: blue;
    }

    .adjacent-div {
        margin-bottom: 10px;
        height: 50px;
        width: 100%;
        background-color: red;
    }
</style>

<div class="parent">
    <div class="adjacent-div"></div>
    <div class="adjacent-div"></div>
    <div class="bottom-div"></div>
</div>

在上面的示例中,父div的高度为200px,底部div的高度为50px,其他相邻的div的高度也为50px,并且它们之间有10px的间距。底部div会被定位到父div的底部,而其他相邻的div则会按照正常流布局排列,并与底部div相邻。

这是一个基本的实现方法,具体的样式和布局可以根据实际需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于css margin,你需要知道一切

以下情况下,margin 会重叠: 相邻兄弟姐妹 完全空盒子 元素和第一个或最后一个子元素 依次来看看这些场景。...前两个元素之间 margin 是50px,因为较小顶部 margin 较大底部 margin 相结合。...第二个元素第三个元素之间 margin 是 3em,因为3em大于第二个元素底部margin 20px。...但是你会发现实际效果是第一项和最后一项元素margin齐平,好像子元素和元素之间没有50pxmargin一样。...这样,就很少会遇到 margin 重叠问题,因为有margin边总是没有margin相邻。 这个解决方案并不能解决你可能遇到问题,因为子元素margin会与元素相互重叠。

1.3K40
  • 圣诞快乐,手绘CSS圣诞老人,DIY浪漫圣诞礼物!

    尽管原始版本中,眼睛和脸颊位置是相对于整个画布,但在这个版本中,我们将它们放置脸部内部,这样做可以更容易地进行管理。...添加小胡子: 小胡子位于头部上方,由两个具有相似样式(只是旋转角度不同元素组成,它们并排放置。为了更好地控制两者样式,我们可以使用相邻兄弟选择器(+)。...绘制圣诞老人手臂 圣诞老人手臂采用身体相同钟形形状,但这个钟形会更短更宽。这样,当我们将它放置在身体后面时,它会在两侧“溢出”。...通过添加从透明到半透明黑色小垂直渐变,手臂视觉上身体产生距离。这种渐变效果看起来像是阴影,并强调了手臂后置位置。 手部同样简单,就是一个圆形。眼睛或按钮绘制方法相同。...然后我们将其放置画布底部,并添加一点微小弯曲度(通过制作一个倒置钟形!)。就这样,我们圣诞老人站在了一个小山丘上。 雪花步骤也相当简单。

    16710

    【CSS】309- 复习 CSS盒模型

    2.4 实例题(根据盒模型解释边距重叠) 例:元素里面嵌套了一个子元素,已知子元素高度是 100px,子元素元素上边距是 10px,计算元素实际高度。 ?...class='child'> 它元素实际高度是 100px 或 110px 都可以。...2.5.2 BFC原理(渲染规则|布局规则): (1)内部 Box 会在垂直方向,从顶部开始一个接着一个地放置; (2)Box 垂直方向距离由 margin (外边距)决定,属于同一个 BFC 两个相邻...,清除内部浮动(原理:触发 div BFC 属性,使下面的子 div 都处在 div同一个 BFC 区域之内) 4、去除边距重叠现象,分属于不同 BFC 时,可以阻止 margin 重叠 2.6...都有效; (3)Box 垂直对齐方式:以它们底部、顶部对齐,或以它们里面的文本基线(baseline)对齐(默认,文本图片对其),例:line-heigth vertical-align。

    1.5K30

    HTML+CSS基础

    2、margin:外边距           2.1     相邻盒模型,相邻间隙中,都有margin时候,虽然各有各margin,但是最终显示是取大原则,选择大margin作为两盒字边距          ...               2.2.2     margin叠压问题,见2.1                2.2.3     margin-bottom 无效问题,有时候需要设置某块级元素底部显示...2.2.3.3         如果目标元素下方没有其他同辈元素,为什么margin-bottom:0不代表它在元素底部?...3、盒子大小:( border + padding ) * 2 + width     ( margin 不算 , 这里前提是左右对称 )      4、让元素底部显示:          ...如果需要选择紧接在另一个元素后元素,而且二者有相同元素,可以使用相邻兄弟选择器 二、span标签:行内区分样式时使用。

    2.8K91

    css面试点二:BFC(块级格式化上下文)+常见布局方案

    不同类型 Box, 会参与不同 Formatting Context(一个决定如何渲染文档容器),因此Box内元素会以不同方式渲染。...BFC是一个独立布局环境,其中元素布局是不受外界影响,并且一个BFC中,块盒行盒(行盒由一行中所有的内联元素所组成)都会垂直沿着其父元素边框排列。...或fixe BFC布局规则: 1.内部Box会在垂直方向,一个接一个地放置(不设置浮动,设置浮动那肯定是左右一行排列了)。...属于同一个BFC两个相邻Boxmargin会发生重叠(正常不设置浮动,两个块元素 margin重叠,仅仅是垂直方向,左右不是这个样子),会发生外边距合并,指的是当两个垂直外边距相遇时,它们形成一个外边距...CSS当中,相邻两个盒子(可能是兄弟关系也可能是祖先关系)外边距可以结合成一个单独外边距。这种合并外边距方式被称为折叠,并且因而所结合成外边距称为折叠外边距。

    50320

    浅谈 CSS 用法

    div{ width:100px; height:100px; background:gold; } 1.2 CSS HTML 连接方式 1.2.1 内联样式 示例...示例 #id { 属性:值 ··· } 1.3.4 其他选择器 并集选择器 .name1,.name2,.name3 { ··· } /*.../* 连接正在被访问样式 */ a:hover{} /* 鼠标悬浮样式 */ 1.4 盒子模型    元素页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻...和右浮动(float:right)两种   ② 浮动元素会向左或向右浮动,碰到元素边界、其他元素才停下来   ③ 相邻浮动块元素可以并在一行,超出级宽度就会换行   ④ 元素如果没有设置尺寸...(一般是高度不设置),元素内整体浮动子元素无法撑开元素,元素需要清除浮动

    1.5K40

    解析 CSS 格式化上下文

    BFC 内垂直方向盒子距离以 margin 属性为准,上下 margin 会叠加。每个元素左侧最外层边界包含块 BFC 左边相接触(对于从左往右格式化,否则相反)。即使存在浮动也是如此。...主要作用 创建独立渲染环境 防止因浮动导致高度塌陷 防止上下相邻外边距折叠 如何创建 BFC html 元素本身就是 BFC display === flow-root/inline-block/...行内元素垂直方向上可按照顶部、底部或基线对其。...行盒左右两边都会触碰到包含块,而 float 元素则会被放置在行盒和包含快边缘中间位置。 折行: balabala ......行内元素撑开元素高度,通过 vertical-align 属性进行垂直居中 水平垂直居中 ?

    1.1K20

    关于 vertical-align 你应该知道一切

    前言 vertical-align,写过 CSS 朋友们肯定都知道这个属性作用,顾名思义,垂直对齐,主要目的用于将相邻文本元素对齐。...top bottom 对于内联元素,指的是元素顶部(底部)和当前行框盒子顶部(底部)对齐;即 line-box 顶部(底部)对齐。...text-bottom,指的是盒子底部级内容区域底部对齐,即 content-area 底部部对齐。 例子如下: ?...2、百分比则是基于 line-height 来计算 需要注意是:除了 top bottom 是使元素相对于整行垂直对齐外,其他属性值都是相对于元素。...产生这种现象原因:空白节点、line-height 和 vertical-align 属性;图片后放置空白节点 X,会发现图片基线是元素底部“空白节点”基线对齐,那解决这种问题有以下几个方法

    2.8K20

    熟悉HTML页面架构和常用布局

    浏览器会根据剩余空间来,计算它大小。 flex-self 它可以指定某个元素和其它元素排列方式不同。 order 容器为flex....最外层套一个容器,给容器 指定 display: flex; 容器中指定子元素排列方式, flex-direction: column; 顶部和底部高度,主体使用 flex : 1 比例来达到自适应...它特点: 它其实也是两列布局,只是它在右端 分为 顶部 和 主体 两部分, 顶部会放置一些点击左侧菜单关联菜单,主体放置点击菜单显示内容 如何进行布局 它和两列布局基本相同,不同点就是它在右端显示不一样...如何进行布局 通过给容器 宽度 和 高度 都 100% , 铺满整个屏幕, 容器 display 为 flex, 使用justify-content: center; 决定 子元素主轴方向上怎么显示...JS实现方法: 固定死图片宽度, 图片放置到一个数组中, 浏览器根据动态识别宽度来判断当前显示多少项,然后遍历数组,url 放置 src 中, 下拉刷新数据,重新调取请求数据接口,push到数组中

    1.4K20

    深入学习下 CSS 间距相关知识

    因此,本文中,我分享关于 CSS 中间距、实现该间距不同方法以及何时使用填充或边距所有信息。 现在,让我们开始吧。 间距类型 CSS 中间距有两种类型,一种元素外,另一种元素内。...editors=1100 另一个边距折叠相关示例是子级和级,让我们假设以下内容: HTML: I'm the child...根据 W3C,以下是针对该问题一些解决方案: 给元素添加边框 子元素显示更改为 inline-block 更直接解决方案是 padding-top 添加到元素。...负边距 它可以四个方向边距一起使用,某些用例中非常有用。 让我们假设以下内容: 级有 padding: 1rem,这导致子级从顶部、左侧和右侧偏移。 但是,子元素应该紧贴其父元素边缘。...你有没有想过当margin具有不同书写模式元素一起使用时应该如何表现? 考虑以下示例。

    13.4K40

    CSS高级选择器

    他们之间用宫格隔开 我们选择该标签时候可以.a.a-1,也有.a,也可以.a-1 常用两个伪类选择器 伪类选择器都是用:连接 类名:nth-child(N):先确定位置,再筛选选择器 同一结构下都是相同选择器时使用...类名:nth-of-type(N):先确定选择器,匹配位置 同一结构下不全是相同选择器时使用 举例 二.后代(子代)选择器 后代选择器: CSS语法:上一级标签他所有的后代用宫格进行连接 子带选择器 CSS语法:节点标签后他子节用...--我们只要body下h2类标签字体都是红色--> div>.h2{ color:red; } 三.兄弟(相邻)选择器 兄弟选择器:~进行连接,他是找到前者后他会接着找后者然后会一直遍历结束把所有的后者多找到...相邻选择器:+进行连接,他是找到前者后,在前者后面的相邻才会选中,如果没相邻他会接着找第二个前者 注意 选择器放置位置前放置位置后,会有影响有点类似正则匹配先匹配到第一个然后匹配第二个 他所改变是他们后者而不是两个都改变

    82230

    HTML和CSS常见问题整理

    display:node:把元素隐藏起来,并且会改变页面布局,可以理解成页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明,长度为底部边框一半。...需要放到后面,左右两边使用absolute定位,因为绝对定位使其脱离文档流,最后面的center会显示正常文档流中,然后设置margin属性,留出左右两边宽度。...2.属于同一个BFC两个相邻Boxmargin会发生重叠 3.BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素。...5.计算BFC高度,浮动元素也参与计算 BFC作用: 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 原理:触发divBFC属性...,使下面的子div都处在div同一个BFC区域之内 4.分属于不同BFC时,可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗高度,视窗高度是100vh vw 相对于视窗宽度

    1.5K30

    BFC(块级格式化上下文)常见布局方案

    BFC是一个独立布局环境,其中元素布局是不受外界影响,并且一个BFC中,块盒行盒(行盒由一行中所有的内联元素所组成)都会垂直沿着其父元素边框排列。...属于同一个BFC两个相邻Boxmargin会发生重叠(正常不设置浮动,两个块元素margin重叠,仅仅是垂直方向,左右不是这个样子) 3.每个元素margin box左边, 包含块border...5.计算BFC高度时,浮动元素也参与计算(就是子元素设置浮动,脱离文档流,元素高度塌陷,给元素设置BFC,那么元素高度就不会忽略浮动子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流元素...CSS当中,相邻两个盒子(可能是兄弟关系也可能是祖先关系)外边距可以结合成一个单独外边距。这种合并外边距方式被称为折叠,并且因而所结合成外边距称为折叠外边距。...折叠结果按照如下规则计算: 1、两个相邻外边距都是正数时,折叠结果是它们两者之间较大值。 2、两个相邻外边距都是负数时,折叠结果是两者绝对值较大值。

    55730

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

    一、连续排列链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局中 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度 1/3 ; 2、标签结构设置 布局中 三个 链接图片..., 放置 单独 标签中 , 每个 标签中放置一个 链接标签 , 链接标签中包裹一个 图片 ; <!...{ /* 设置 .brand 容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3..., 会按照宽高比等比例缩放 ; 设置样式为 : .brand div img { /* 设置图片链接中图片 水平方向上充满容器即可 */ width: 100%; } 二、完整代码实例...: 10px 10px 0 0; } .brand div { /* 设置 .brand 容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列 */ float

    3.6K20

    深入理解和应用Float属性

    二、核心解决问题 文字围绕图片:img标签多个文本标签放置一个容器中,如果img浮动,文本标签会围绕图片。 文件内容文件内容文件内容文件容文件内容文件内容 2.1 这是一个问题 浮动元素正常元素相邻...1.BFC(块级格式化上下文)     他是一个独立渲染区域,规定区域内部如何布局,且外部毫不相干,主要规则如下: 1.1 内部box会垂直方向,一个接一个地放置 1.2 Box垂直方向距离由margin...1.4 每个boxmargin 左边,包含border box左边相接触(右边一样),浮动也是如此 2. IFC(行级格式化上下文) 框从包含块顶部开始,一个接一个水平放置。...规则如下: 2.1 不能指定宽高 2.2 Margin、Padding、border垂直方向无效 2.3 行框左边紧贴包含块左边,而行框右边紧贴其包含框右边,而浮动块可以插入包含块边缘行框之间

    1.1K100

    知识整理之CSS篇

    [endif]--> 常见浏览器兼容性问题解决方案? 不同浏览器标签默认padding和margin不同 问题症状:常用标签,不加样式控制情况下,各自margin、padding差异较大。...CSS选择器优先级、权重计算 CSS选择器优先级 选择器优先级分为两种:1. 选择器同一级别时。2. 选择器不同级别时。 CSS选择器不同级别时 属性后面使用!...可能原因: 使用import方法导入样式表 样式表放在页面底部 有几个样式表,放在html结构不同位置 原理:当样式表晚于结构性html加载,当加载到此样式表时,页面停止之前渲染。...浮动元素、inline-block 元素、绝对定位元素 margin 不会和垂直方向上其他元素 margin 折叠 浮动元素 margin 垂直方向上也不会发生 margin 折叠,即使和它相邻子元素也不会...当一个元素不同浏览器中有不同默认值时,normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。

    1.6K20

    行高、(顶线、中线、基线、底线)、vertical-align

    (1)基线 基线 沿着文本最底部 一行线, 基线(base line)并不只是 汉字文字下端沿 若一行文本 有中文和英文,则基线会在 英文 x最底部。...一般情况下,也可以认为是相邻文本行 基线到基线 距离,中线到中线 距离。 一个线,到另一个相邻行 相同线,都是行高。 所以,很显然,内容区 一般是小于 行高 。...行距为负数情况,也就是两行文字 部分重合。... image.png 元素对行高影响 行框高度是行内最高行内框高度,通过line-height调整,内容区高度字体尺寸有关,padding不对行高造成影响。...但是文档流中,padding是会占据空间,如果有元素,元素高度还是按照行高来决定。

    2K20

    Web前端开发CSS笔记

    ; } CSS引用:外部引用 外部引用是最常用一种引用方式,就是CSSHTML代码分离,方便管理....伪元素选择器(1): 鼠标经过超链接呈现出不同状态,或者点击超链接会出现不同效果....,默认有以下4种属性: -> block 元素前和后都会有换行 -> inline 元素前和后都不会有换行 -> list-item block相同,但增加了目录列表项标记 ->...-> right 表示文本在这个元素右边 -> none 表示这个元素两边不能有空文本 clear: 清除该元素旁边其他浮动对象,常float通用: -> both 表示不允许有浮动对象...class="center"> 元素放置右下角: 元素放置屏幕右下角,通过定位position:fixed选项实现这一效果. .form-right{ background-color

    2.5K20
    领券