将响应宽度分为 css 中的 4 列

Question

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

    .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>

Answer 1

want to split the code below into 4 columns width: 25%; but I only achieved 3 columns

指定元素的宽度时，必须考虑给定的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

上的相同代码

将响应宽度分为 css 中的 4 列

divide response width into 4 columns in css

css

response

结果