如何将文本放置在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 ...
随机推荐
- 通信协议之Modbus协议（一）
Modbus通信协议: 简介:Modbus协议是应用于电子控制器上的一种通用语言 通过此协议,控制器相互之间,控制器经由网络(例如以太网) 和其他设备之间可以通信,他已经成为一种通用工业标准,有啦它 ...
- 实验6：路由器IOS升级
路由器IOS升级 Cisco路由器IOS映像恢复及升级方法 一.Cisco 1000,1600,2500,4000系列 1.IOS映像恢复的方法及步骤 1) 连接PC的COM1口与路由器的consol ...
- PHP5.3的VC9、VC6、Thread Safe、Non Thread Safe的区别
PHP一共给了四个版本,VC9 x86 Non Thread Safe.VC9 x86 Thread Safe.VC6 x86 Non Thread Safe.VC6 x86 Thread Safe, ...
- 15-Git使用语法
Git命令 版本库的创建 方法一:使用git bash 1. 在当当前要加创建版本库的文件夹右键使用GitBash 创建仓库执行命令: $ git init 方法二:使用TortoiseGit 2. ...
- VFP 的 SPT 起跳 -- 陈纯(BOE数据网络工作室)
细节描述 Visual FoxPro 的 SPT 技术快速入门 说在前面熟悉 Fox 的朋友都知道,在 VFP 里我们可以使用远程视图 (Remote View) 和 SPT(SQL Pass Thr ...
- python xlrd操作
python里面的xlrd模块详解(一) 那我就一下面积个问题对xlrd模块进行学习一下: 1.什么是xlrd模块? 2.为什么使用xlrd模块? 3.怎样使用xlrd模块? 1.什么是xlrd模 ...
- Apache httpd.conf配置文件 1（Global Environment ）
Apache 版本: Server version: Apache/2.2.15 总计 1000行左右 英文前带井号的是注释,不起作用. 但很多注释去掉前方的 # 即可生效. # # This i ...
- Linux 软件安装卸载 （源码、rpm）
Linux下软件的安装主要有两种不同的形式.第一种安装为源码安装,文件名为xxx.tar.gz压缩包为主;以第一种方式发行的软件多为以源码形式发送的.第二种方式则是另一种安装文件名为xxx.i386. ...
- 杭电-------2046骨牌铺方格（C语言写）
#include<stdio.h> ] = { }; long long recrusion(int n) { || a[n]>) { return a[n]; } ) + recr ...
- 大数相乘----C语言
/* 大数相乘: 因为是大数,乘积肯定超出了能定义的范围,因此考虑用数组存储,定义三个数组,分别存储乘数,被乘数和积. 规则与平常手算一样,从个位开始分别与被乘数的每一位相乘,但是有一点不同的是:我们 ...