古老的CSS同高列问题-白红宇

古老的CSS同高列问题

阅读量：6900 次

发布时间：2019-06-27

本文共 4686 字，大约阅读时间需要 15 分钟。

今日在网页设计时，遇到了希望页面的几列同高需求的实现问题，搜罗了一下google,找到以下文章，感觉不错，翻译过来，同时作为学习加深印象。

https://css-tricks.com/fluid-width-equal-height-columns/

相同高度的列布局在web design领域是个很常见的需求。如果所有列都使用相同的background,那么所谓同高列在这里就没有什么关系了，因为我们可以在这些列的父元素那里设置background就好了。但是如果任何一列希望有不同的背景色，那么就不同了，我们必须无论其内容多高，所有column随着最高的列的高度保持同高就很重要了。

问题：

我们希望达成的效果

为了解决上面的问题，达成上面的目标，如果设计是Non-fluid width宽度的，那么这个task就相当简单了。对于定宽等高layout，最好的方案是方案：所有的列都被一个.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


       
      
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      
  
      
       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.
      
  
      
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      
  
      
       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.

#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.


       
      
       I am listed first in source order.
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      
  
      
       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.
      
  
      
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

#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方案


       
      
       I am listed first in source order.
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      
  
      
       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.
      
  
      
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.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

转载于:https://www.cnblogs.com/kidsitcn/p/6824870.html

你可能感兴趣的文章