我有以下HTML。我希望这些列具有以下宽度:

问题描述 投票:0回答:1
列2 = 〜250px(600 * 0.46852 / 1.120469)

列3 = 〜150px(600 * 0.281787 / 1.120469)

INSTEAD我已经测试过的所有浏览器(Chrome,Safari,Firefox)呈现以下宽度的列:
  • 列1 = 〜165px
  • 列2 = 〜209px
  • 列3 = 〜150px

SO第3列是正确的宽度。如果我删除css列是预期的宽度,甚至是陌生人!如果我删除了
    min-width: 150px
  • CS,然后将问题更改为
  • min-width
  • 问题仍然复制。
  • 这种感觉就像CSS网格错误如何处理最小列宽度。还是我缺少规格的某个角落?
  • 我的用例:我正在构建一个带有CSS Grid的可重大列的响应式表元素。

grid-template-columns
grid-template-columns: minmax(150px, 0.370162fr) minmax(150px, 0.46852fr) minmax(150px, 0.281787fr)

您需要根据this anding

.

*,
::before,
::after {
  box-sizing: border-box;
}

.table {
  display: grid;
  width: 600px;
  padding: 1px;
  gap: 1px;
  background-color: #ccc;
  grid-template-columns: 0.370162fr 0.46852fr 0.281787fr;
}

.cell {
  min-width: 150px;
  padding: 8px 12px;
  background-color: white;
}
<div class="table">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

html css css-grid
1个回答
0
投票
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.