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

问题描述

我想为我的 css 表使用百分比.不幸的是，它对我不起作用.

这段代码有什么问题?我应该使用 flexbox 而不是 table 吗?

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

ul {列表样式:无；边距:0；显示:表；表格布局:固定；宽度:100%；}李{宽度:50%；显示:表格单元格；}

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

解决方案

这是一个使用 ul/li 元素的示例，2 列使用百分比并且具有相等的高度.

由于表格更喜欢表格/行/单元格布局，我对您的 html 进行了一些重组.

* {边距:0；}html，正文{高度:100%；}.桌子 {显示:表；宽度:90%；高度:60%；填充顶部:5%；边距:0 自动；}ul{显示:表格行；列表样式:无；边距:0；}李{显示:表格单元格；宽度:50%；边框:1px 实心 #999；}

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

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屋！