首页 > 代码库 > 小知识随手记(三)
小知识随手记(三)
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://www.mamicode.com/"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://www.mamicode.com/"http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> </div> </body> </html>
2、
小知识随手记(三)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。