css总结 -使用display:inline-block,出现元素高度错位
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致,发生错位。
- <style>
- .left{
- display:inline-block;
- height:110px;
- width:110px;
- }
- .right{
- display:inline-block;
- height:110px;
- width:110px;
- }
- </style>
- <div class='container'>
- <div class="left"></div>
- <div class="right"></div>
- </div>
调整方法,就是为他们指定基准线
- <style>
- .left{
- display:inline-block;
- height:110px;
- width:110px;
- vertical-align:top
- }
- .right{
- display:inline-block;
- height:110px;
- width:110px;
- vertical-align:top
- }
- </style>
- <div class='container'>
- <div class="left"></div>
- <div class="right"></div>
- </div>
其实为其中一项指定基准线即可,
css总结 -使用display:inline-block,出现元素高度错位的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block三者之间的区别
1. display:block就是将元素显示为块级元素. block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度:(<d ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- [Python]List 过滤
获取数据库列表屏蔽系统自带数据库 # 原代码 db_list_result = [('master', ), ('tempdb', ), ('model', ), ('msdb', ), ('stud ...
- 使用Vue.prototype在vue中注册和使用全局变量
在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...
- css实现表单label文字两端对齐
如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...
- Java连载89-SorteSet、Comparable接口
一. SortedSet集合直接举例 package com.bjpowernode.java_learning; import java.util.*; /** * java.util.Set * ...
- Python常用模块sys,os,time,random功能与用法,新手备学。
这篇文章主要介绍了Python常用模块sys,os,time,random功能与用法,结合实例形式分析了Python模块sys,os,time,random功能.原理.相关模块函数.使用技巧与操作注意 ...
- Winfom 使用 BackgroundWorker 实现进度条
BackgroundWorker 简介(来自百度) BackgroundWorker是·net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作.耗时的操作(如下载和数据库事务)在 ...
- java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化
前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...
- Bilibili手机端下载的Download文件批量转换为MP4软件【Bilibili_DownVideoToMp4】原创发布
Bilibili手机端下载的Download文件批量转换为MP4软件[Bilibili_DownVideoToMp4]原创发布 起因 Bilibili手机端的视频下载下来只能在手机上看,手机屏幕太小看 ...
- 保存为pickle
保存为pickle import pickle # 保存模型 with open('model.pickle', 'wb') as f: pickle.dump(model, f) # 读取模型 wi ...
- SSM使用AbstractRoutingDataSource后究竟如何解决跨库事务
Setting: 绑定三个数据源(XA规范),将三个实例绑定到AbStractoutingDataSource的实例MultiDataSource(自定义的)对象中,mybatis SqlSessi ...