由于某种原因,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 -->
最佳答案
我相信这就是您要找的。我删除了列数和间隙,并且只使用 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%;
}
关于html - Div 阴影没有显示并并排出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44658087/