古老的CSS同高列问题
来源:互联网 发布:ipad提示无法加入网络 编辑:程序博客网 时间:2024/04/30 11:27
https://css-tricks.com/fluid-width-equal-height-columns/
相同高度的列布局在web design领域是个很常见的需求。如果所有列都使用相同的background,那么所谓同高列在这里就没有什么关系了,因为我们可以在这些列的父元素那里设置background就好了。但是如果任何一列希望有不同的背景色,那么就不同了,我们必须无论其内容多高,所有column随着最高的列的高度保持同高就很重要了。
问题:
我们希望达成的效果
为了解决上面的问题,达成上面的目标,如果设计是Non-fluid width宽度的,那么这个task就相当简单了。对于定宽等高layout,最好的方案是 Faux Columns 方案:所有的列都被一个.col容器元素包裹,并且容器有一个包含等高定宽划分的image background,这样即便内容并不相同,但是视觉上就实现了等高。
然而,如果设计要求是fluid width的并且是multiple columns的,这个任务就开始变得更加困难了。我们再也不能够使用一个静态的图片来模拟等高多列的视觉效果了。下文,就这个问题探讨几个不同的方案来:
1. 使用css3 gradients来创建columns
http://codepen.io/mariemosley/pen/01f15f7a2dfcff438d17cd77c298b710
2. 使用css2 pseduo elements
主要的想法是将parent wrapper设置为relative positioning. 然后三列都设置为1/3父元素的宽度。在父亲元素使用::before,after pseudo元素设置为absolute positioning
3.使用tables
4. 使用css display table
<div id="css-table"> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div></div>
#css-table { display: table;}#css-table .col { display: table-cell; width: 25%; padding: 10px;}#css-table .col:nth-child(even) { background: #ccc;}#css-table .col:nth-child(odd) { background: #eee;}
http://codepen.io/mariemosley/pen/be5a044df9d23b8a1cee9dc8f2fd2f06
5. float + margin/padding补偿方案
这个方案对所有column都使用一个warpper元素作为公共的父亲,而这个wrapper设置为hidden overflow,它不仅clear floated columns,而且会将任何在其外部的内容隐藏起来。
这一点很重要,因为我们将强制列高度非常高,并且cutting them off with the hidden overflow.
The magical voodoo here is that while we force the columns taller with a huge amount of bottom padding, we suck the height of the wrapper back up with an equal amount of negative bottom margin. This gives us just the effect we need.
<div id="one-true" class="group"> <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div></div>
#one-true { overflow: hidden; }#one-true .col { width: 27%; padding: 30px 3.15% 0; float: left; margin-bottom: -99999px; padding-bottom: 99999px;}#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }#one-true .col:nth-child(3) { left: 0; background: #eee; }#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */
6. flexbox方案
<div class="flexbox"> <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div></div>
.flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;}.flexbox .col { flex: 1; padding: 20px;}.flexbox .col:nth-child(1) { background: #ccc; -webkit-order: 1; -ms-flex-order: 1; order: 1;}.flexbox .col:nth-child(2) { background: #eee; -webkit-order: 0; -ms-flex-order: 0; order: 0;}.flexbox .col:nth-child(3) { background: #eee; -webkit-order: 2; -ms-flex-order: 2; order: 2;}body { padding: 20px;}
7. javascript option
http://codepen.io/micahgodbolt/pen/FgqLc
- 古老的CSS同高列问题
- 古老的火车问题
- div 三列同高
- CSS创建各栏同高的多栏布局
- 关于Div同列问题
- 两个古老问题的递归算法。
- ctfIDF实验室古老的邮件编码问题
- 高次同余问题
- CSS 多列等高
- 三列等高CSS布局的一个实例
- 利用css实现两列等高的方法
- 字节对齐问题----一个很古老的基础问题
- 关于中国古老的一个问题,百钱百鸡问题
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
- 一道古老的智力题——奇怪的问题
- 奇怪的问题——来源:古老的智力题
- C#导入excel数据表字符与数字同列出现的问题
- Exchange Server 2013 运维系列——解决多域名同用户的配置问题
- vuejs plus d3
- styling the SVG images
- 参照安卓计算CRC16校验码的方法获取Objective-C的CRC16位校验码
- 场景异步加载显示加载界面
- hihocoder1543(思维+ 二分)
- 古老的CSS同高列问题
- base64编码以及url safe base64是怎么工作的?
- 免费杀毒软件卡巴斯基安装
- 为什么有时父元素无法包含子元素?
- skynet笔记
- 如何使用chrome devtool调试Mobile网页?
- unreal engine 4学习笔记:实现判断游戏角色朝向功能
- 【CUGBACM15级BC第11场 C】hdu 5056 Boring count
- VPN setup using routerOS