CSS 实现等高布局以及多行文本垂直居中
将display属性设置为table-cell,具有table的特点。
1.同行等高。
2.宽度自动调节。
相当于表格是td,
<style type="text/css">
.classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}
.classtd{display:table-cell; border-color:#cc0;}
</style>
<div class="classtd"><p>大人。<br />好好学习天天向上 做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务<br />做好技术,做好产品为人民服务</p> </div> <div class="classtd"><p>我和左边等高
我和左边我
和左边等高等
高我和左边等高</p></div>
大人。
好好学习天天向上 做好技术,做好产品为人民服务
做好技术,做好产品为人民服务
做好技术,做好产品为人民服务
做好技术,做好产品为人民服务
我和左边我
和左边等高等
高我和左边等高
如果要实现垂直居中的话 可以与 vertical-align:middle结合使用即可
<style type="text/css">
.classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}
.classtd div{ display: inline-block; vertical-align: middle;}
</style>
<div class="classtd">
<div style="width:100px;background: #639146; color:#fff;">垂直居中fsdfsd</div>
<div style="width:100px;background: #2B82EE; color:#fff;">垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div>
<div style="width:100px;background: #F57900; color:#fff;">垂直居中qqqqqqqqqqq</div> <div style="width:100px;background: #BC1D49; color:#fff;">处置居中qqqqqqqqqqqq</div> </div>
上面看出三个方块已经垂直居中了
CSS 实现等高布局以及多行文本垂直居中的更多相关文章
- 如何用css实现"等高布局"。
有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 【CSS】等高布局
1. 负margin: margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果. ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 关于css解决俩边等高的问题(等高布局)
等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
随机推荐
- Android 4 学习(21):对话框
对话框 创建Dialog的两种方式: 1. 使用Dialog类或其子类,包括DialogFragment 2. 在Activity中使用Dialog主题(theme) 下面是使用Dialog类的一个例 ...
- Linux下编译、安装php
一.apache环境下php的安装步骤如下:[注意:编译安装php前,应先安装好apache,因为编译php时要用到apache的路径] 1. 在http://www.php.net/download ...
- 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)
转自原文 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp) 最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决 ...
- Hexo+Github/Coding免费搭建个人博客网站
体验更优排版请移步原文:http://blog.kwin.wang/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把 ...
- spring-boot-maven-plugin 插件的作用
pom文件中添加了"org.springframework.boot:spring-boot-maven-plugin"插件.在添加了该插件之后,当运行"mvn pack ...
- Consul 简介、安装、常用命令的使用
1 Consul简介 Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其他分布式服务注册与发现的方案,Consul的方案更"一站式" ...
- 10分钟.Net Core 简单入门教程
以 Centos 为例 1.安装所需的依赖关系 打开命令提示符并运行以下命令: sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/p ...
- $.getJSON() 回调函数没有执行的原因
$.getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据. 语法 $.getJSON(url,data,success(data,status,xhr)) url必填 ...
- mySQL中插入多条记录
用一条INSERT向SQL中插入多条记录 2008-12-22 10:07:01| 分类: 记事本_编程技术|举报|字号 订阅 Sql 语法: 插入多行记录 Insert Into Tabl ...
- systemd 配置文件
[Unit]区块通常是配置文件的第一个区块,用来定义 Unit 的元数据,以及配置与其他 Unit 的关系.它的主要字段如下. Description:简短描述 Documentation:文档地址 ...