如何将文本放置在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 ...
随机推荐
- parzen 窗的matlab实现
用一下程序简单实现使用parzen窗对正态分布的概率密度估计: (其中核函数选用高斯核) %run for parzen close all;clear all;clc; x=normrnd(0,1, ...
- 《快乐编程大本营》java语言训练班 1课:第一个java程序：你好，范冰冰；
1Java介绍 2安装java环境JDK 3安装web环境tomcat 4安装开发工具Idea2017 5编写第一个程序 ‘你好,范冰冰!’ 地址: http://code6g.com 1.Java介 ...
- 二、Shell变量
类型 注释强变量 变量在使用前,必须事先声明,甚至还需要初始化 弱变量 变量用时声明,甚至不区分类型 变量的作用:用来保存变化的数据 变量名 名称固定,由系统设定或用户定义 变量值 根据用户设 ...
- Spring基础(一)_控制反转(IOC)
Spring-IOC 1.简述 1.1 依赖注入DI 现实开发中,每一个应用都会由两个或多个类组成,这些类之间相互协作完成特定的业务逻辑.根据传统做法,每个对象负责管理与自己协作的对象的引用(也就是, ...
- 《Android Studio实战 快速、高效地构建Android应用》--五、备忘录实验(1/2)
通过开发App熟悉Android Studio的用法 开发一款用于管理备忘事项列表的App,核心功能: 创建.删除备忘 将某些备忘标记为重要(左侧带颜色标签突出显示) 涉及:操作栏菜单.上下文菜单.用 ...
- Face-anti-spoofing实验记录（通过val_public_list.txt制作val数据集）
https://sites.google.com/qq.com/chalearnfacespoofingattackdete/contest-details 数据集官方获取网站 网友总结 https: ...
- 林大妈的JavaScript进阶知识（二）：JS异步行为
JavaScript 是单线程执行的 JavaScript运行在浏览器中.浏览器是多线程的,但只分配了其中一条给JavaScript,作为它的主线程.对于编码者来说,JavaScript是单线程的.因 ...
- 威联通（NAS）搭建个人图床
名词解释: 图床:一般是指储存图片的服务器,有国内和国外之分.国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度.国内也分为单线空间.多线空间和cdn加速三种. 更详细的内容,请左转查看百 ...
- Go语言实现：常见排序算法
冒泡排序: 时间复杂度:O(n^2) 稳定性:稳定 //冒泡排序 //相邻两位交换,12交换,23交换,34交换,把最大的数放到最右边 //利用flag标记可以避免无效循环 func BubbleSo ...
- 编译生成protobuf的jar包
编译生成protobuf的jar包 配置maven 安装maven,并修改maven源为阿里云 下载maven wget http://mirror.bit.edu.cn/apache/maven/m ...