如何创建：等高列

学习如何使用 CSS 创建等高列。

如何创建等高列

当您的列应并排显示时，您通常会希望它们具有相同的高度（与最高的高度匹配）。

Rarraba ni rarraba.

第一步 - 添加 HTML：

  

    
Column 1
    
Hello World
  
  

    
Column 2
    
Hello World!
    
Hello World!
    
Hello World!
    
Hello World!
  
  

    
Column 3
    
Some other text..
    
Some other text..
  

第二步 - 添加 CSS：

.col-container {
  display: table; /* 使容器元素表现得像表格 */
  width: 100%; /* 设置为全宽以扩展整个页面  */
}
.col {
  display: table-cell; /* 使容器内的元素表现得像表格单元格 */
}

Rarraba ni rarraba.

响应式等高

我们在上一个例子中创建的列是响应式的（如果您在尝试的例子中调整浏览器窗口的大小，您将看到它们会自动调整到所需的宽度和高度）。但是，对于小屏幕（如智能手机），您可能希望它们垂直堆叠而不是水平并排：

Lakar fada wannan, kara kaidanci wanda ke da media query, kuma tsaika burin pixel:

Iyali

/* Idan birane da ke kaiwa kashi 600px ko, kafa kafa kofin */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Rarraba ni rarraba.

Kaiwa kofin da kaiwa haki da kaiwa da Flexbox

Ananin ba Flexbox fadiwa kofin baiyowa:

Iyali

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Rarraba ni rarraba.

Rarraba:Internet Explorer 10 da ke dace ko girmi Flexbox.

Rarrar da suka waje

TsunanCSS Flexbox