使用CSS的等高列 [英] Equal height columns with CSS

问题描述

我想对我的css表使用百分比。很遗憾，它对我无效。

此代码有什么问题？我应该使用flexbox而不是表？

我想使用表格，因为我想要相同的高度列。

  ul {list-style：none; margin：0; display：table; table-layout：fixed;宽度：100％;} li {width：50％; display：table-cell;}  

 < ul& < li> 1< / li> < li> 2< / li> < li> 3< / li> < li> 4< / li> < li> 5< / li> < li> 6< / li>< / ul>  

解决方案

这里是一个使用 ul / li

$ b
$ b
$ b

  * {margin：0;} html，body {height：100％;}。宽度：90％;身高：60％; padding-top：5％; margin：0 auto;} ul {display：table-row; list-style：none; margin：0;} li {display：table-cell; width：50％; border：1px solid＃999;}  

 < div class =table> < ul& < li> 1< / li> < li> 2< / li> < / ul> < ul> < li> 3< / li> < li> 4< / li> < / ul> < ul> < li> 5< / li> < li> 6< / li> < / ul>< / div>  

I would like to use percentage for my css table. Unfortunately, it doesn't work for me.

What's wrong with this code? Should I use flexbox instead of table?

I would like to use table, because I would like same height columns.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

解决方案

Here is a sample using ul/li elements, 2 columns using percentage and have equal height.

As tables prefer table/row/cell layout, I restructured your html a little.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}

li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}

<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

这篇关于使用CSS的等高列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！