Question

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

编辑：我希望这些街区并排而且负责任。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我相信这是你正在寻找的。我删除了列数和间隙，只使用了margin和float与@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%;
}

这是一个工作小提琴：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%;
}

Answer 2

我认为这就是你要找的东西（如果我理解的话）。我添加了angularjs ng-repeat，但这只是为了方便。还有一个只有html和css版本的链接。

link1 - 角度为https://jsfiddle.net/suunyz3e/1408/

link2 - 仅限html和css https://jsfiddle.net/suunyz3e/1410/

HTML：

<div ng-app="myModule" ng-controller="myCtrl">
        <div class="div-item" ng-repeat="item in loopArray">
          <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>

的CSS：

.div-item{
  display:inline-block;
  min-width:140px;
  background-color:#fff;
  margin:5px;
  border:1px solid red;
  border-radius: 4px;
  -webkit-box-shadow: 0px 2px #d4d6d8;
  -moz-box-shadow: 0px 2px #d4d6d8;
  box-shadow: 0px 2px #d4d6d8;
}

angualrjs

angular.module('myModule', [])

.controller('myCtrl', function ($scope) {

   $scope.loopArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

});

Div阴影没有显示并且并排出现

2 个答案: