布局小记

inline-block不懂为什么出现了上下错位,div1和div2明明定宽了,父元素宽度也够,高度也一样。就是第一个div1加了个overflow:auto就不行了。

想了下,大概因为overflow使得div1变成bfc了。

解决方法:让div2也有overflow属性变成bfc, 或者vertical-align:middle

块状的布局一般有浮动布局和inline-block布局两种。

浮动布局就是float咯,但是如果每个div高度不一样,比如一行三个div,中间那个高了点,就容易出现下一行只有一个div,被卡在最右边这种支离破碎的布局。

所以浮动布局要定宽高。

inline-block布局就是要兼容ie6,7咯。这个也是定宽高比较好,在ie下的解决方法就是触发haslayout,和高级浏览器的bfc差不多。

时间: 2024-08-26 18:56:12

布局小记的相关文章

Android开发-动态布局小记

android动态布局相比静态布局,动态布局不用再将xml转变了布局代码,提高了一定的效率,当然可以忽略不记.动态布局主要是比较灵活,可以很快的在代码中直接修改布局,并直接使用控件进行业务逻辑开发.但代码量通常比较大,维护没有静态布局方便.不过,作为一个android开发人员,掌握一定的动态布局技巧,有时在工作中也是可以提高一定的代码开发效率.   在动态布局中,要想实现一个布局,一般是先创建五大布局的对象.然后对这些对象进行属性设置,之后再向里面添加子布局或控件. 以RelativeLayou

Ubuntu键盘布局小记

1. 中国键盘是用国际的105键的,所以在Ubuntu中,当我们在终端中输入 sudo dpkg-reconfigure keyboard-configuration 输入完当前用户密码之后,会出现一个伪键盘布局配置窗口,我们Win7 Ubuntu的双系统会默认选中"标准105(国际)" 2. 设置日本键盘109的键盘布局(japen keyboard) 由于我自己买了一款日本键盘,109键的,上面有片假名的那种,这个就相当于我们的五笔咯. 我在键盘布局 ,我选择了"Sun

移动端布局 小记

vue 做 左侧菜单栏,wrapper 为父级,弹出时显示并从左侧做滑入动画,transform: translateX(-250px); 渐隐渐现.子级左右布局左侧60%,右侧40%,点击滑出菜单且隐藏 .fadeIn-enter-active { transition: all .4s ease; } .fadeIn-leave-active { transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .fadeIn-enter, .f

微软颜龄 维护小记——布局的小智慧

简介 前几版How-Old发布后,不少用户反馈,在显示结果的页面中,用于标注前面人年龄的标签,会遮挡住后面的人的脸.这是因为我们最初采用固定偏移的方式来放置年龄标签. 而怎么样让标签不遮挡住其他人的脸,则成为一个有趣的问题.最近我们发布了一次How-Old更新,正好用这篇文章,来记录一下我们对这一问题的实现. 先直观的看一下新版本的改变(左旧 右新): 问题 我们来抽象一下这个问题. 在服务器端识别出了照片中的脸后,会将识别数据传回客户端,其中包含了每个脸的边缘矩形的位置和大小信息(FaceRe

DOM性能小记

在使用DOM操作时,同样的效果用不同的方式来实现,性能方面也会有很大的差异.尤其在移动式设备上,资源本来就很有限,一旦DOM写不好的话操作就会非常卡顿.这个周末,就写个DOM性能小记吧.错漏之处,望多指教. 1.浅说reflow 首先讲讲最近我才了解到的一个比较深入且模糊的东西——reflow. 从字面上理解的话,reflow有回流.重排的意思.它是指在DOM内容更新或增删时发生的一个响应过程,可以理解为页面内容改变了,然后发生重新排版这样的一个行为.我们可以将执行DOM操作细分为以下三个过程:

转 小辉_Ray DOM性能小记

在使用DOM操作时,同样的效果用不同的方式来实现,性能方面也会有很大的差异.尤其在移动式设备上,资源本来就很有限,一旦DOM写不好的话操作就会非常卡顿.这个周末,就写个DOM性能小记吧.错漏之处,望多指教. 1.浅说reflow 首先讲讲最近我才了解到的一个比较深入且模糊的东西——reflow. 从字面上理解的话,reflow有回流.重排的意思.它是指在DOM内容更新或增删时发生的一个响应过程,可以理解为页面内容改变了,然后发生重新排版这样的一个行为.我们可以将执行DOM操作细分为以下三个过程:

Android开发注意点小记

暂时主要讨论以下几点: Android引用外部包,报NoClassDefFoundError异常崩溃 同名包引用关系问题 程序图标 9patch图片素材 Android引用外部包,程序报java.lang.NoClassDefFoundError异常崩溃 在Android工程中,引用第三方jar包(尤其是经过本地编译的),在Java代码开发环境中正常编译输出,但到手机等设备上运行时一旦运行到引用该包的代码,立即异常崩溃,系统显示进程意外停止提示窗口,LogCat报出异常信息 dalvikvm C

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

[Mac] Mac book pro换SSD硬盘、制作启动U盘、TimeMachine恢复 小记

Mac book pro 硬盘故障.换SSD硬盘.启动U盘制作 小记 2012年买的Mbp又出硬盘故障了,虽然各种功能都能用,但经常频繁的出现鼠标风火轮,已经下好的电影在本地播放时都会隔个几分钟卡一下.拿到AppStore检测,说是硬盘的问题,"SMARTStatus:FAIL",建议是要换硬盘.好吧,我的保修期已过,就准备自己动手换盘了. 准备步骤为: 1.    使用Time Machine制作系统备份.(Mac OS神器) 2.    制作启动U盘.(还有系统光盘的同学可以省去这