如何将文本放置在div的底部显示呢？
摘要:
下文讲述将文本放于div的底部的两种方法，如下所示:
实现思路:
思路1:采用绝对定位的方式，将其放置于div的底部
思路2:使用Line-height属性将文本放置于div的底部
行高大小设置的计算公式:(height-(font-size/2))x2=***px
(100-(12/2)*2 = 188px;
在web开发中,我们经常需要将div中的文本进行相关的定位，那么下文将通过举例的方法讲述
底部对齐的方法分享
<html>
<head>
<meta charset="utf-8">
<title>猫猫教程(www.maomao365.com)</title>
<style> .div1{
height:180px;
width:180px;
border:1px solid blue;
position:relative
}
.div1 p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
} .div2{
height:100px;
width:180px;
border:1px solid blue;
font-size:12px;
line-height:188px;
}
</style>
</head>
<body> <div class="div1">
<p>这里是maomao教程</p>
</div> <br />
<div class="div2"> 猫猫教程欢迎你 </div> </body>
</html>
如何将文本放置在div的底部显示呢？的更多相关文章
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- 如何让图片在垂直方向与 div的底部对齐 水平居中
需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 在div 底部显示背景图片
下面代码实现div层背景图片在底部显示: div { background : url (/images/bg.jpg) no-repeat fixed ; background-position-y ...
- vue 移动端项目，动态控制div距离底部的距离
<template> <div class="details"> <com-nav-bar title="保险详情"> &l ...
- 设置DIV隐藏与显示，表格滑动条
问题描述: 现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决: (1)DIV块的隐藏与显示 如上所示, ...
- 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- 页面内容不满屏幕高度时，footer底部显示
底部高度固定的情况下 <style> body,html{ height: 100%; margin: 0; } .content{ min-height: 100%; padding-b ...
随机推荐
- spring @Scheduled注解 定时任务 详解
scheduled的使用注解的方式进行调度 先要配置spring.xml xmlns:task="http://www.springframework.org/schema/task&quo ...
- tomcat 持久区溢出
知识点:堆内存设置(JVM堆内存)java的堆内存分为两块:permantspace(持久带) 和 heap spaceOOM1.年老代溢出,表现为:java.lang.OutOfMemoryErro ...
- 注册并加入dn42网络的方法
简介 https://dn42.net/howto/Getting-started 注册要求: 一个24小时运行的linux/BSD设备 该设备必须支持创建隧道,例如GRE,OpenVpn,IPSec ...
- Unreal Engine 4 蓝图完全学习教程（一）—— 简要介绍
首先启动UE4: 新建项目类型为游戏: 选择空项目Blank: 项目设置选项: 点击创建项目: 打开后的窗口称为:“关卡编辑器”,由多个面板组成.在UE中,设计3D场景的空间称为“关卡”. 简单介绍一 ...
- mybatis缓存，从一个“灵异”事件说起
刚准备下班走人,被一开发同事叫住,让帮看一个比较奇怪的问题:Mybatis同一个Mapper接口的查询方法,第一次返回与第二次返回结果不一样,百思不得其解! 问题 Talk is cheap. Sho ...
- lua学习之语句篇
语句 赋值 修改一个变量或者修改 table 中的一个字段的值 多重赋值,lua 先对等号右边的所有元素进行求值,然后再赋值 值的个数小于变量的个数,那么多余的变量就置为 nil 初始化变量,应该为每 ...
- IPsecVPN：阿里云VPN网关和深信服防火墙打通公有云和公司内网
简介 目前许多公司网络环境为混合云(私有云,IDC,公司内网融合)的状态,通过内网ip的访问使得工作更加方便,需求也更为迫切,而本文介绍的即是实现私有云和公司内网互通的一种方法,希望对有此需求的小伙伴 ...
- 2020牛客寒假算法基础集训营4 C : 子段乘积
C:子段乘积 考察点 : 线段树,尺取,乘法逆元 坑点 : 区间要做到不重不漏, long long 侃侃 : 这道题在比赛是写的尺取,但是写了半天发现不好处理除 0 问题(浮点错误),需要用到乘法逆 ...
- 手把手带你阅读Mybatis源码（三）缓存篇
前言 大家好,这一篇文章是MyBatis系列的最后一篇文章,前面两篇文章:手把手带你阅读Mybatis源码(一)构造篇 和 手把手带你阅读Mybatis源码(二)执行篇,主要说明了MyBatis是如何 ...
- win10打开自带wifi热点共享
win10打开自带wifi热点共享 第一步,打开网络和Internet设置 二. 找到移动热点