具有CSS的等高列我想用百分比作為我的CSS表。不幸的是，這對我不起作用。這個密碼怎么了？我應該用柔性箱代替桌子嗎？我想使用表格，因為我想要相同的高度列。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>
3 回答
當年話下
TA貢獻1890條經驗 獲得超9個贊
下面是一個使用ul/li元素，2列使用百分比并具有相同的高度。
由于表更喜歡表/行/單元格布局，所以我對html做了一些調整。
* {
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>
蕪湖不蕪
TA貢獻1796條經驗 獲得超7個贊
具有Flexbox的等高柱
HTML
<ul> ??<li>1</li> ??<li>2</li> ??<li>3</li> ??<li>4</li> ??<li>5</li> ??<li>6</li></ul>
CSS
ul?{?display:?flex;?}使用上面的簡單代碼，您可以將任意數量的內容放入列表項中，并且所有列表項都具有相同的高度。
演示
注：
Flex容器的初始設置為
flex-direction: row，這意味著子元素(也稱為Flex項)將水平排列。Flex容器的另一個初始設置是
align-items: stretch，這將導致?lián)锨椪归_完整的高度(或寬度，取決于flex-direction)，容器的。以上兩個設置一起創(chuàng)建等高列。
彈性等高列只適用于兄弟姐妹。
將高度應用于FLEX項將覆蓋等高功能。
等高列僅適用于同一行上的撓曲項。.
Cats萌萌
TA貢獻1805條經驗 獲得超9個贊
我對這個問題的解釋提出了一個答案，這個問題不同于@michael_B，最初的風格是width: 50%;在li元素，我認為所期望的結果是將6個列表項流成2列3行。這種情況不能很容易地使用CSS表解決，但是使用Flexbox相對簡單。
ul {
list-style: none;
margin: 0;
width: 100%;
/*kills the irritating intial padding on uls in webkit*/
-webkit-padding-start: 0;
display: flex;
flex-flow: row wrap;
/*stretch is the default value, but it will force items to stretch to match others in their row*/
align-items: stretch;
/*below properties just emphasize the layout*/
padding: 2px;
background-color: green;
}
li {
/*forces border-width and padding to be part of the declared with (50% in this case)*/
box-sizing: border-box;
width: 50%;
/*list-item, inline-block, and block work equally well*/
display: list-item;
/*below properties just emphasize the layout*/
border: white 2px solid;
background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/
li:nth-child(3) {
height: 40px;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
添加回答
舉報
0/150
提交
取消