html - Div 阴影没有显示并并排出现

Question

由于某种原因，Div block 阴影没有显示，最后一个 block 的阴影并排出现。我不知道我还需要做什么。我将 z-index 和位置设置为 relative 但它仍然没有按预期工作。

编辑:我希望 block 并排并负责。

.main {
  padding-top: 10px;
  -moz-column-count: 4;
  -moz-column-gap: 0;
  -webkit-column-count: 4;
  -webkit-column-gap: 0;
  column-count: 4;
  column-gap: 0;
}

.main .columnBlock {
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 0 4px 8px 8px;
  -webkit-box-shadow: 0px 2px #d4d6d8;
  -moz-box-shadow: 0px 2px #d4d6d8;
  box-shadow: 0px 2px #d4d6d8;
  position: relative;
  z-index: 999;
}

.column {
  display: inline-block;
  min-width: 140px;
  width: 22%;
  vertical-align: top;
  padding-top: 8px;
}

.column ul {
  margin-top: 4px;
  margin-bottom: 1em;
}

.column ul {
  display: inline-block;
  width: 100%;
  vertical-align: baseline;
  height: 100%;
}

@media screen and (max-device-width: 9999px) {
  .column {
    width: 100%;
    height: auto;
    float: none;
  }
}

<div class="main" style="width: 100%;">
  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

</div>
<!-- .main -->

Answer 1

我相信这就是您要找的。我删除了列数和间隙，并且只使用 margin 和 floats 进行 @media 查询。我又添加了两列，以便您可以看到它的实际效果。

HTML:

<div class="main" style="width: 100%;">
  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

</div>
<!-- .main -->

CSS:

.main {
  padding-top: 10px;
display: flex;
flex-wrap: wrap;
}

.main .columnBlock {
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 0 4px 8px 8px;
  -webkit-box-shadow: 0px 2px #d4d6d8;
  -moz-box-shadow: 0px 2px #d4d6d8;
  box-shadow: 0px 2px #d4d6d8;
  position: relative;
  z-index: 999;
  float: left;
  margin: 5px;
}

@media screen and (max-width:767px) {
  .columnBlock {
    width: calc(50% - 10px);
  }
}

@media screen and (min-width:768px) {
  .columnBlock {
    width: calc(33.3333% - 10px);
  }
}

@media screen and (min-width:992px) {
  .columnBlock {
    width: calc(25% - 10px);
  }
}

.column {
  display: block;
  vertical-align: top;
  padding-top: 8px;
}

.column ul {
  margin-top: 4px;
  margin-bottom: 1em;
}

.column ul {
  display: inline-block;
  width: 100%;
  vertical-align: baseline;
  height: 100%;
}

这是一个工作 fiddle :https://jsfiddle.net/u2h1cwzt/3/

您所有的阴影都在它们应该在的位置，并且它是响应式的。

编辑:添加了 display: flex，以防止出现间隙。

编辑:没有 Flex:https://jsfiddle.net/u2h1cwzt/4/

CSS:没有 FLEX

.main {
  padding-top: 10px;
}

.main .columnBlock {
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 0 4px 8px 8px;
  -webkit-box-shadow: 0px 2px #d4d6d8;
  -moz-box-shadow: 0px 2px #d4d6d8;
  box-shadow: 0px 2px #d4d6d8;
  position: relative;
  z-index: 999;
  float: left;
  margin: 5px;
}

@media screen and (max-width:767px) {
  .columnBlock {
    width: calc(50% - 10px);
  }

  .columnBlock:nth-of-type(odd) {
    clear: left;
  }
}

@media screen and (min-width:768px) {
  .columnBlock {
    width: calc(33.3333% - 10px);
  }

  .columnBlock:nth-of-type(odd) {
    clear: none;
  }

  .columnBlock:nth-of-type(3n+1) {
    clear: left;
  }
}

@media screen and (min-width:992px) {
  .columnBlock {
    width: calc(25% - 10px);
    clear: none !important;
  }

}

.column {
  display: block;
  vertical-align: top;
  padding-top: 8px;
}

.column ul {
  margin-top: 4px;
  margin-bottom: 1em;
}

.column ul {
  display: inline-block;
  width: 100%;
  vertical-align: baseline;
  height: 100%;
}