HTML5基础加强css样式篇(table-cell应用,多列等宽)(五十)
2017-04-21 14:26
501 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 制作多列等宽自适应布局 1.父元素 display: table; width: 100% 2.布局元素(子元素 ) display: table-cell; 3.子元素之间的空隙,通过一个正常的div分割即可。 4.如果存在多行,需要在包裹一个 display: table-row(<tr>) */ .table-box{ display: table; width: 100%; } .box { height: 200px; width: 33.3333333%; display: table-cell; } .box1{ background-color: red; } .box2{ background-color: blue; } .box3{ background-color: gold; } .white-space{ height: 200px; width: 5px; background-color: #fff; } /*display: table-cell == <td>*/ </style> </head> <body> <div class="table-box"> <div class="box box1"></div> <div class="white-space"></div> <div class="box box2"></div> <div class="white-space"></div> <div class="box box3"></div> </div> <script type="text/javascript"> </script> </body> </html>
相关文章推荐
- HTML5基础加强css样式篇(target目标伪类选择器应用)(十)
- HTML5基础加强css样式篇(text-align,text-decoration,text-indent,text-transform,letter-spacing,word-spacin)(四)
- HTML5基础加强css样式篇(target目标伪类选择器)(九)
- HTML5基础加强css样式篇(css过渡属性的隐式过渡问题)(二十二)
- HTML5基础加强css样式篇(animation简写,控制多个动画,动画帧简写)(三十二)
- HTML5基础加强css样式篇(css属性transform 函数(2D)时钟)(二十六)
- HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写属性 )(五)
- HTML5基础加强css样式篇(多媒体选择器)(十七)
- HTML5基础加强css样式篇(css过渡结束事件:transitionend)(二十三)
- HTML5基础加强css样式篇(css过度效果:界面的浮层遮罩和消失)(十九)
- HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)
- HTML5基础加强css样式篇(DOM的属性操作(对class属性值的操作 setAttribute,removeAttribute,classlist:remove,add,toggle))(七)
- HTML5基础加强css样式篇(常用伪元素选择器after,before)(十五)
- HTML5基础加强css样式篇(结构化伪类选择器:nth-of-type)(十一)
- HTML5基础加强css样式篇(css属性transform 函数(2D)的scale(),transform-origin,skew(),translate(),rotate() )(二十四)
- HTML5基础加强css样式篇(color,direction)(二)
- HTML5基础加强css样式篇(标签自定义属性)(八)
- HTML5基础加强css样式篇(checked状态伪类和清除默认样式)(十三)
- HTML5基础加强css样式篇(属性选择器)(十四)
- HTML5基础加强css样式篇(css属性transform 函数(3D)3D盒子)(二十七)