Div影不顯示，並排顯示

Question

出於某種原因Div塊陰影未顯示，並且最後一個塊的陰影並排顯示。我不知道我還需要做什麼。我有z-index和位置設置爲相對，但它仍然沒有按預期工作。

編輯：我希望塊並肩負責。

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

你所有的陰影，他們應該是和它的響應。

編輯：添加顯示：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] 

});