使用 CSS 的等高列 [英] Equal height columns with CSS
本文介绍了使用 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屋!
查看全文