在css中将响应宽度分成4列[重复]答案

【问题标题】：divide response width into 4 columns in css [duplicate]在css中将响应宽度分成4列[重复]
【发布时间】：2020-01-28 15:48:11
【问题描述】：

我使用响应式界面，想将下面的代码拆分为 4 列width: 25%;，但我只实现了 3 列。如何将其固定为 4 列并仍然使用 margin: 5px; ？

演示：https://jsfiddle.net/4je2y9nb/

    .list {
  width:100%;
  display: block;
}
.item {
    position: relative;
    width: 25%;
    height: 148px;
    font-size: 12px;
    overflow: hidden;
    background-color: red;
    float: left;
    margin: 5px;
}

<div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    </div>

【问题讨论】：

窗口宽度为 25% 的框不能在 4 列中显示，如果它们之间有空格。只是简单的数学。

标签： css response

【解决方案1】：

想把下面的代码分成4列宽：25%；但我只达到了 3 列

在指定元素的宽度时，必须考虑给定的margin属性

在你的情况下：width: calc(100% / 4 - 10px);

结果

.list {
  width: 100%;
  display: block;
}

.item {
  position: relative;
  width: calc(100% / 4 - 10px);
  height: 148px;
  font-size: 12px;
  overflow: hidden;
  background-color: red;
  float: left;
  margin: 5px;
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

JSFiddle 上的代码相同

【讨论】：

谢谢。它按我的意愿工作。我忘了使用 calc