Question

我使用CSS calc使7个项目的宽度正确并排坐下：

\0

这在大多数浏览器中都能正常工作，但有时IE会向上舍入，使最后一项清晰到下一行。如何从宽度中减去1px？

width: calc(100% / 7);

Answer 1

始终在操作数之前和之后包含空格（即/，*，-，+）。这是一个有效的例子。

注意：我使用了-2px，因为我每个border-right都有border-left和1px。

Flexbox是一个更好的选择，但在继续之前请检查浏览器兼容性。

＆＃13;

.wrapper {
  width: 100%;
  background-color: palegreen;
}
.wrapper div {
  float: left;
  height: 70px;
  width: calc((100% / 7) - 2px);
  background-color: cornflowerblue;
  border: 1px solid red;
}

＆＃13;

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 2

我建议您使用calc来解决flexbox问题。

#parent {
  width: 500px;
  height: 100px;
  display: flex;
}

#parent > div {
  flex: 1;
  border: 1px solid black;
}

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

如果您真的需要更好的浏览器支持，可以查看CSS Tables。

Answer 3

为了获得比Flexbox更好的支持，请使用 CSS表作为解决方案，并首先避免整个@return Model[]|null要求。

Support可以追溯到 IE8

＆＃13;

calc

＆＃13;

.wrapper {
  width: 100%;
  background-color: #bada55;
  display: table;
  table-layout: fixed;
}
.wrapper div {
  display: table-cell;
  height: 70px;
  background-color: rebeccapurple;
  border: 1px solid orange;
}

＆＃13;

CSS calc百分比除以x然后减去1 px？

3 个答案: