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 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
随机推荐
- java中Thursday 05 September 2002类型时间的转化
package config; import Java.text.DateFormat; import java.text.ParseException; import java.text.Simpl ...
- 通过Java代码装配Bean
上面梳理了通过注解来隐式的完成了组件的扫描和自动装配,下面来学习下如何通过显式的配置的装配bean 二.通过Java类装配bean 在前面定义了HelloWorldConfig类,并使用@Compon ...
- Rhythmk 一步一步学 JAVA (12) Spring-1 之入门
(一)简单对象Spring XML配置说明 使用Spring (Spring 3.0) 实现最简单的类映射以及引用,属性赋值: 1.1.新建类UserModel: package com.sprin ...
- 【308】Python os.path 模块常用方法
参考:Python os.path 模块 参考:python3中,os.path模块下常用的用法总结 01 abspath 返回一个目录的绝对路径. 02 basename 返回一个目录的基名 ...
- 【303】C# 复制窗体 & 修改名称
参考:C#复制粘贴窗体 参考:VS修改项目解决方案名称 一.复制窗体 在“解决方案资源管理器”(以下简称:管理器)中选择要复制的窗体,比如要复制Form2,则在Form2.cs上右单击,选择复制. 在 ...
- flask 常见关系模板代码
以下罗列了使用关系型数据库中常见关系定义模板代码 一对多示例场景:用户与其发布的帖子(用户表与帖子表)角色与所属于该角色的用户(角色表与多用户表)示例代码class Role(db.Model): & ...
- ShadowVolume
[ShadowVolume] 1.z-pass 算法. z-pass 是 shadow volume 一开始的标准算法,用来确定某一个象素是否处于阴影当中.其原理是: Pass1:enable z-b ...
- POST 与 GET请求区别
- etherboot无盘启动
2001.10.30 吴峰光 本站提供对无盘启动的支持.本文就此作一简单介绍. 一.概述 无盘启动,更确切的说是网络启动,可算是最为轻松和简便的启动方式了. 目前还很少有人了解它,因为目前的软硬件条件 ...
- list count++
AtomicInteger count = customTypeCounter.get(order.getCustomerType()); if (count == null) { count = n ...