小知识随手记
Posted 古兰精
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小知识随手记相关的知识，希望对你有一定的参考价值。
1、不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路：
（1）、width：33.33%；（2）font-size: 0;因为子元素inline-block之间可能有空格，需要去除默认的宽度；
（3）图片和文字均需加： vertical-align: middle;使居中；（4）如果采用float的话，变成block元素，vertical-align会不起作用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路</title> <style type="text/css"> .section{ width: 100%; overflow: hidden; font-size: 0; /*这里为0是因为子元素inline-block之间可能有空格*/ background-color: #eee; } .picture{ width: 33.333%; vertical-align: middle; display: inline-block; /*float 就是block布局 vertical-align不起作用*/ } .picture img{ width: 100%; } .text{ width: 33.333%; vertical-align: middle; /*两个都要加*/ display: inline-block; padding: 0 20px; box-sizing: border-box; background-color: #ccc; } .text h2{ font-size: 20px; line-height: 48px; margin: 0; } .text p{ font-size: 14px; line-height: 22px; margin: 0; } </style> </head> <body> <div class="section"> <div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> <div class="text"> <h2>DIV CLASS=TEXT</h2> <p>这里是一个<strong>字数长度不确定</strong>的段落，到底有多少个字我也不知道，有几行我也不清楚，是非颠倒多多多多多多多多多多多多多多多多多多多多
多多多多多多多多多多多多多多高度是随意的，但是我依然希望他能相对于图片垂直剧中，随时修改文字都可以。但是高度还是不要大于左右两个图片的高度吧，否则也没意义呀。ps：图片来源于网络</p> </div> <div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> </div> </body> </html>
2、
以上是关于小知识随手记的主要内容，如果未能解决你的问题，请参考以下文章