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

浮动div周围的文本使用css在底部对齐

浮动div周围的文本使用CSS在底部对齐可以通过以下步骤实现:

  1. 首先,给包含文本的父元素设置一个相对定位的属性,例如:
代码语言:txt
复制
.parent {
  position: relative;
}
  1. 然后,给浮动的div设置一个浮动属性,例如:
代码语言:txt
复制
.float-div {
  float: left;
}
  1. 接下来,给文本元素设置一个绝对定位属性,并使用bottom属性将其定位到父元素的底部,例如:
代码语言:txt
复制
.text {
  position: absolute;
  bottom: 0;
}

完整的示例代码如下:

代码语言:txt
复制
<div class="parent">
  <div class="float-div">浮动的div</div>
  <p class="text">文本内容</p>
</div>
代码语言:txt
复制
.parent {
  position: relative;
}

.float-div {
  float: left;
}

.text {
  position: absolute;
  bottom: 0;
}

这样,浮动的div周围的文本就会在底部对齐了。

对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议您参考腾讯云的官方文档或者搜索相关的云计算服务提供商的文档来了解相关产品和解决方案。

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

相关·内容

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

表格标题位置 语法:caption-side:取值; 默认情况下,表格标题是表格顶部,属性为:top,如果想把标题放在底部,属性为:bottom。...表格边框间距 语法:boreder-spacing:像素值; 图片对齐 图片水平对齐 css使用text-align来实现图片水平对齐,其属性值跟文本一样。...图片是父元素中进行水平对齐,因此我们是图片父元素中定义。 img父元素是div,因此想要实现图片水平对齐,就应该在div中定义text-align属性。...属性定义是极其复杂,其中有一项是“vertical-align属性定义周围行内元素或文本相对于该元素垂直方式”。...以往这个属性总应用于图像,使文本围绕在图像周围,不过 CSS 中,任何元素都可以浮动,定义之后,浮动元素会生成一个块级框(inline-block),而不论它本身是何种元素。

1.5K10

CSS浮动 (比较详细、生动、经典)

(标准流中元素)底部对齐。...就拿上边例子来说,我们是想让div2移动,但我们却是div1元素CSS样式中使用了清除浮动,试图通过清除div1右边浮动元素(clear:right;)来强迫div2下移,这是不可行,因为这个清除浮动...要想让div2下移,就必须在div2CSS样式中使用浮动。...可以看出div2右边有一个浮动元素div1,那么我们可以div2CSS样式中使用clear:right;来指定div2右边不允许出现浮动元素,这样div2就被迫下移一行,排到div1下边。...需要注意是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内文本依然会为这个元素让出位置,环绕在周围

1.2K20
  • CSS】309- 复习 CSS盒模型

    点击上方“前端自习课”关注,学习起来~ 一、概念 CSS盒模型本质上是一个盒子,封装周围HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content...即使存在浮动也是如此; (4)BFC 页面上是一个隔离独立容器,外面的元素不会影响里面的元素,反之亦然。...2.5.3 CSS什么情况下会创建出BFC(即脱离文档流) 0、根元素,即 HTML 元素(最大一个 BFC) 1、浮动( float 值不为 none ) 2、绝对定位元素( position...3、可以让父元素高度包含子浮动元素,清除内部浮动(原理:触发父 div BFC 属性,使下面的子 div 都处在父 div同一个 BFC 区域之内) 4、去除边距重叠现象,分属于不同 BFC...都有效; (3)Box 垂直对齐方式:以它们底部、顶部对齐,或以它们里面的文本基线(baseline)对齐(默认,文本与图片对其),例:line-heigth 与 vertical-align。

    1.5K30

    CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

    文章目录 一、网页底部盒子模型测量及样式 1、盒子布局说明 2、底部大盒子测量及样式 3、版心盒子 4、版权盒子 5、链接盒子 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、显示效果...底部大盒子 高度 415 像素 , 实际内容距离顶部有 30 像素间隔 , 这里使用 30 像素 内边距撑开该间隔 , ( 外边距会造成塌陷 ) , 由于内边距会撑大盒子 , 这里使用 385...; color: #00a4ff; } 5、链接盒子 整个链接模块盒子 网页底部右侧 , 这里设置右浮动 ; /* 整个链接模块盒子 右浮动 */ .links { float: right;...12 像素 , 颜色值 #333333 ; 最终 CSS 样式为 : /* 整个链接模块盒子 右浮动 */ .links { float: right; } /* dl 列表设置 链接 盒子中左浮动...h3 { /* 文本浮动 */ float: left; /* 设置字体大小和颜色 */ font-size: 20px; color: #494949; /* 取消标题加粗样式, 也可以使用

    4.2K30

    一篇文章带你了解CSS基础知识和基本用法

    一、Css用法 1.如何使用Css 要想使用Css来增加Html美观,有三种方式: 1).头部文件中定义 标签Css属性 2).导入Css文件 #创建一个...='text-indent:2em'> 可以设置负数 也可使用百分数 像素 2)).文本对齐方式 left 左边...ellipsis 省略符号来代表被修剪文本 string 使用给定字符串来代表被修剪文本 13)).文本轮廓 <div style='text-outline:1px 1px...2)).表格文本对齐 设置水平对齐方式,比如左对齐、右对齐或者居中 td { text-align:right } 设置垂直对齐方式,比如顶部对齐底部对齐或居中对齐 td { vertical-align...不在空单元格周围绘制边框 show 空单元格周围绘制边框 6)).设置表格布局算法 table { table-layout:fixed; } automatic 列宽度由单元格内容设定

    11.1K20

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    : 10px 0; } 5、设置文本 链接中文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置图片下方 ;...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } a { /* 设置字体颜色值 */...color: #666; /* 取消链接底部横线样式 */ text-decoration: none; } .clearfix:after { /* 清除浮动固定样式...*/ width: 30px; /* 默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...border-radius: 10px 10px 0 0; } .brand div { /* 设置 .brand 父容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列

    3.3K40

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

    布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置 , 为父容器三个子元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置子元素宽度...{ /* 设置 .brand 父容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3...none; } img { /* 默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...*/ width: 30px; /* 默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...border-radius: 10px 10px 0 0; } .brand div { /* 设置 .brand 父容器下 div 盒子左浮动 这样这些盒子可以水平方向上紧密排列

    3.6K20

    【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

    一、样式测量及核心要点 1、样式测量 京东手机端 https://m.jd.com/ 顶部提示 使用京东 APP 打开网页提示 , 是通过 固定定位 放置顶部 , 当向上滑动界面的时候 , 该...; } 建议为图像设置一个总体默认样式 , 默认基线对齐是个大坑 ; img { /* 默认图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以...*/ vertical-align: middle; } 二、核心代码编写 ---- 下图中四个元素 , 使用 列表实现 , 为 元素设置左浮动...; } div { /* 设置 CSS3 盒子模型样式 */ box-sizing: border-box; } ul { /* 取消 ul 列表项内外边距 */...color: #666; /* 取消链接底部横线样式 */ text-decoration: none; } .clearfix:after { /* 清除浮动固定样式

    2K10

    CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

    总体背景是白色 ; 课程表 版心右侧 , 可以设置成 右浮动 , 设置一个 50 像素 外上边距 ; /* Banner 条右侧 课程表盒子样式 */ .course { /* 设置了浮动不会出现外边距塌陷问题...solid #ccc; /* 顶部设置 10 像素外边距 下面直接紧贴写文字 以达到多行文本居中对齐效果 */ margin-top: 10px; } 列表项中三种文本 , 样式如下...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式...-- 底部 全部课程 按钮 --> 全部课程 完整代码 : 全部课程 <!

    3.6K60

    CSS

    a:visited(访问过链接),用于阅读文章,能清楚判断已经访问过链接   a:active(链接上按下鼠标时状态),用于表现鼠标按下时链接状态 伪类选择器:伪类指的是标签不同状态...>内容 CSS Float(浮动CSS Float(浮动),会使元素向左或向右移动,其周围元素也会重新排列。...如果图像是右浮动,下面的文本流将环绕在它左边: ? 如果你把几个浮动元素放到一起,如果有空间的话,它们将彼此相邻。 在这里,我们对图片廊使用 float 属性: ?...元素浮动之后,周围元素会重新排列,为了避免这种情况,使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊: ? ?...position 属性四个值: static relative fixed absolute 元素可以使用顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。

    1.4K60

    一、前端基础-css-css属性操作二

    -- 补充内容 1、正常文档流:将元素(标签)进行排版布局时候按从上到下,从左到右顺序排版一个布局流。...-- float 1、float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过 CSS 中,任何元素都可以浮动。...浮动元素会生成一个块级框,而不论它本身是何种元素。 2、left:元素向左浮动,如果前一个元素是正常文档流元素,保持垂直距离,如果是脱离文档流,紧跟在其后。文本内容不会被覆盖。...元素不浮动,并会显示在其文本中出现位置。 5、inherit:规定应该从父元素继承 float 属性值。...text-align: center">底部

    76200

    CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

    文章目录 一、 导航栏测量 1、 左侧边界 2、 文本测量 3、 底部边框测量 二、 导航栏代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果 三、 完整代码 1、 HTML...工具 , 点击文字内容 ; 文字工具中 , 会显示文字大小 18 像素 , 点击右侧颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...3、 底部边框测量 底部边框 2 像素 , 使用吸管工具吸取颜色 , 可得到颜色值 #00a4ff ; 二、 导航栏代码编写 ---- 1、 HTML 标签结构 导航栏使用 无序列表 实现 ,...#">课程 职业规划 2、 CSS 样式 导航栏使用了 无序列表 , 无序列表默认样式是...设置总体背景 */ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 浏览器中居中对齐

    3.9K20

    The Mystery Of The CSS Float Property

    这个概念类似于:你每天印刷媒体上所看到内容(图片或其它图像元素 对齐于左边或者右边,其它内容 通常是一些文本 会环绕在 左对齐或右对齐 图片元素 周围)。如下图所示: ?...一个浮动起来inline元素 会被转化为 块元素。 float实际使用 - Float in Practice float属性最常用用途之一是:使图片浮动起来,并且使文本环绕包裹 浮动图片。...所有没有浮起来块元素都有类似的行为。 p元素内文本是inline元素,所以文本会围绕浮动元素。浮动元素之所以有外边距,是想让它偏离p元素:使得p元素忽略浮动元素视觉上更清晰。... 应用于新添加元素CSS: .clearfix { clear: both; } 你也可以通过使用 标签达到同样效果...in Practice'章节 所讨论内容,Max Design 描述了怎样使 带标题图片浮起来,并允许图片周围文本自然地围绕着它。

    1.7K20

    IT课程 CSS基础 028_浮动、定位、对齐

    浮动 CSS 中,浮动是一种布局技术,通过 float 属性来使元素页面中沿着容器左侧或右侧浮动,使得其他元素能够环绕它。...> div-right 效果: 浮动元素可能导致父元素高度塌陷,可能导致其他DIV元素受到影响,多个浮动元素同一行可能会重叠,需要使用...">文章标题文章标题文章标题 效果: 浮动是早期用于创建多栏布局一种技术,但现代布局中,通常更推荐使用 Flexbox 或 Grid 等更灵活布局技术。...class="base z-index-example1"> 对齐 CSS 对齐是指通过 CSS 属性来控制元素水平和垂直对齐方式...常见对齐属性有以下几个值: left:左对齐 center:居中对齐 right:右对齐 top:顶部对齐 middle:居中对齐 bottom:底部对齐 水平对齐 text-align 用于设置文本内容元素框中水平对齐方式

    12410

    CSS样式

    属性规定文本块中首行文本缩进 p{ text-indent:50px; } 如果值是负数,将第一行左缩进 表格属性 表格边框:指定CSS表格边框,使用border属性 table, td {...{ border-collapse:collapse; } table,td { border: 1px solid black; } 表格文字对齐:表格中文本对齐和垂直对齐属性,text-align... 第一个元素 第二个元素 h1~p{ color:red; } 盒子模型 所有HTML元素可以看作盒子,CSS中,"box model"这一术语是用来设计和布局时使用...CSS盒模型本质上是一个盒子,封装周围HTML元素,它包括: 外边距(margin),边框(border),内边距(padding),和实际内容(content) Margin(外边距) - 清除边框外区域...值 描述 left 元素向左浮动 right 元素向右浮动 浮动原理: 浮动以后使元素脱离了文档流 浮动只有左右浮动,没有上下浮动 脱离文档流之后,元素相当于页面上面增加一个浮层来放置内容。

    25330

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

    前言 vertical-align,写过 CSS 朋友们肯定都知道这个属性作用,顾名思义,垂直对齐,主要目的用于将相邻文本与元素对齐。...:translateY:属于 CSS3 新特性,对 IE8、IE9 有一些兼容性问题 使用 vertical-align 你能在不同场景下去进行灵活细微元素对齐工作,并且它有很好兼容性,详情如下图所示...基线:书写英语字母时,字母 X 底部所在位置,可以了解下《字母’x’ CSS 世界中角色和故事》(https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css...)将 img 设置浮动或者绝对定位 (如果布局允许的话) Demo 2:近似垂直居中 x <...我们会一眼就看到图片周围到处都是空白空隙,那么这些空隙是什么原因造成呢?很多时候,复杂问题是由简单问题组合而成,那么我们可以按照以下想法来简化问题。 ?

    2.8K20

    flex深度剖析-解决移动端适配问题!

    我么们想要实现两个div一排显示除了行内块元素以外,只能用这让人又爱又恨float float float 属性定义元素在哪个方向浮动。...以往这个属性总应用于图像,使文本围绕在图像周围,不过 CSS 中,任何元素都可以浮动浮动元素会生成一个块级框,而不论它本身是何种元素。...目前,它已经得到了所有浏览器支持,这意味着,现在就能很安全地使用这项功能。 ?...//每个项目两侧间隔相等。所以,项目之间间隔比项目与边框间隔大一倍。 } ? 5、align-items属性(这个也很重要。也常用) align-items属性定义项目交叉轴上如何对齐。..."> 这是底部 6、圣杯布局,双飞翼布局 这种布局,其实就是两层flex 第一层布局用了 flex-direction:

    2.1K10

    CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

    -- 底部 全部课程 按钮 --> 全部课程 <!...1200 像素 , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...*/ text-align: center; /* 垂直对齐 - 行高 = 内容高度 */ line-height: 38px; } /* Banner 条右侧 课程表 底部按钮 - 鼠标经过时样式...这是所有的文本样式 课程链接里面 由 a 标签设置样式 除 a 标签外 只剩下竖线 样式*/ .goods-item { float: left; color: #bfbfbf...h3 { /* 文本浮动 */ float: left; /* 设置字体大小和颜色 */ font-size: 20px; color: #494949; /* 取消标题加粗样式, 也可以使用

    4.3K40
    领券