gpt4 book ai didi

html - Css 显示表不尊重以百分比表示的大小

转载 作者:太空宇宙 更新时间:2023-11-03 22:52:28 25 4
gpt4 key购买 nike

我有一个简单的表格:

<body>
<div class="wrapper">
<div class="board">
<div class="line">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
<div class="line">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
<div class="line">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
</div>
</div>
</div>
</body>

有了这个 Css:

.wrapper {
width: 80%;
height: 80%;
margin: auto;
}
.board {
background-color: #37392e;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}

.line {
display: table-row;
}
.position {
background-color: #DDCECD;
display: table-cell;
width: 33%;
}

当我同时指定尺寸和高度时,div 不显示。我不会在 div 中使用文本,而是在他们的 css“背景”属性中显示图像。我该怎么做才能强制表格元素遵守以 % 表示的大小。

最佳答案

因为 body height 等于 0,0 的 80% 仍然是 0。你需要为 wrapper 设置一个特定的高度,你可以使用 HTML5 vh 单位将其设置为 view port 的 80% .

.wrapper {
width: 80%;
height: 80vh;
margin: auto;
}

关于html - Css 显示表不尊重以百分比表示的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39545659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com