结构： 样式： 1.解决方案一：text-align + inline-block + table-cell + vertical-align(结合前面的水平居中+垂直居中) 2.解决方案二： absolute+transform 3.解决方案三：flex + justify-content + a ...
分类：
其他好文 时间：
2016-09-17 16:24:40
阅读次数：
127
用table+table-cell实现两列布局（一列定宽，一列自适应，且table是自动的两列自动登高） ...
分类：
其他好文 时间：
2016-09-17 11:55:26
阅读次数：
135
阅读目录 方法一：position加margin 方法二： diaplay:table-cell 方法三：position加 transform 方法四：flex;align-items: center;justify-content: center 方法五：display:flex;margin: ...
分类：
Web程序 时间：
2016-09-13 19:19:44
阅读次数：
187
元素两端对齐 第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 * { box- ...
分类：
其他好文 时间：
2016-09-09 13:28:19
阅读次数：
118
之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局（都藏在长长文章之中）。这里开篇再次提一下，希望能将该技术普及下去。 典型的双栏布局类名使用如下： fix l cell 该类名去来自我自己整的CSS基本样式库 – zxx.lib.css 套用HTML显示则为 ...
分类：
其他好文 时间：
2016-09-06 10:21:12
阅读次数：
228
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面试题练习img居中</title> <style type="text/css"> img { /*display: table-cell; vertical-align: mi ...
分类：
Web程序 时间：
2016-09-04 19:05:46
阅读次数：
136
今天遇到一个样式：图文两列排列。 由于图片大小固定，于是就想到了用table-cell实现。 最初css代码如下： 但是如果只是简单的这样写，你会发现图片和问题不在同一个水平线上。 ...
分类：
Web程序 时间：
2016-09-01 22:50:29
阅读次数：
285
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面试题练习img居中</title> <style type="text/css"> img { /*display: table-cell; vertical-align: mi ...
分类：
Web程序 时间：
2016-08-31 23:59:41
阅读次数：
346
布局神器display:table-cell 布局神器display:table-cell 随着时间的推进，ie6、ie7在中国浏览器市场的占有率越来越低的情况，我现在工作的团队，经过用户访问数据，得知ie6、ie7的用户已经非常少的前提下，决定不在兼容ie6、ie7。正式在这个激动人心的决定后，让 ...
分类：
其他好文 时间：
2016-08-31 11:44:18
阅读次数：
181
本文为思路提示篇，因此未详细述说代码，主要总结思路。 1. dispaly：table-cell； vertical-align：middle； 2. 3. 父元素 relative 其本身absolute;方法同上，top：50%； 4. flexbox ...
分类：
其他好文 时间：
2016-08-21 19:55:40
阅读次数：
171
