我有一个由高度相等的响应框组成的布局。他们有 box-shadow
但底部阴影没有出现。
我认为这是因为 div#latest
的 overflow:hidden
被设置为使框等高,正如 One True Layout Method 中所建议的那样.
HTML代码:
<div id="latest">
<div id="section-header"><h4>NEWS</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
</div>
</div>
<div id="latest">
<div id="section-header"><h4>MOST READ</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
</div>
</div>
CSS 代码:
body {
background: #ebebeb;
}
#article-container {
padding: 1em;
}
#article {
padding: 0;
background: #FFF;
height: auto;
margin-bottom: -99999px;
padding-bottom: 99999px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#article figure {
max-width: 100%;
height: auto;
}
#article figure img {
/*height: 30%;*/
}
#article h4 {
padding: 1em;
}
#article h4 a{
text-decoration: none;
color: #000;
}
#article h4 a:hover {
text-decoration: underline;
}
#meta{
color: #ccc;
width:100%;
padding-left: 1em;
}
#meta a {
text-decoration: none;
color: #ccc;
}
#meta a:hover {
text-decoration: underline;
}
#latest {
padding-left:2em;
overflow: hidden;
}
#section-header {
height: 40px;
width:100%;
background: #FFF;
display:table;
border-left: 5px #FFC640 solid;
margin-left: 0;
margin-top:2em;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#section-header h4 {
padding-left: 1em;
vertical-align:middle;
display:table-cell;
}
附言我使用的是 Bootstrap 3。
最佳答案
首先,ID 是唯一,而您正在复制 ID,因此请改用类。
由于您使用的是 Bootstrap ,因此缺少包装 .row
和 col-*-*
的 .container
。
然后,要有相等的 height
而不是那个 hack,可以使用新的灵活布局,它是 flexbox
然后是 box-shadow
会出现
body {
background: #ebebeb;
}
.row {
display: flex
}
.article-container {
padding: 1em;
background: #ddd;
display: flex
}
.article {
padding: 0;
background: #FFF;
height: auto;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2)
}
.article figure {
max-width: 100%;
height: auto;
}
.article figure img {
/*height: 30%;*/
}
.article h4 {
padding: 1em;
}
.article h4 a {
text-decoration: none;
color: #000;
}
.article h4 a:hover {
text-decoration: underline;
}
.meta {
color: #ccc;
width: 100%;
padding-left: 1em;
}
.meta a {
text-decoration: none;
color: #ccc;
}
.meta a:hover {
text-decoration: underline;
}
.section-header {
height: 40px;
width: 100%;
background: #FFF;
display: table;
border-left: 5px #FFC640 solid;
margin-left: 0;
margin-top: 2em;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2)
}
.section-header h4 {
padding-left: 1em;
vertical-align: middle;
display: table-cell;
}
<div class="latest container">
<div class="section-header">
<h4>NEWS</h4>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class=c lass="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
</div>
</div>
<div class="latest container">
<div class="section-header">
<h4>MOST READ</h4>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class=c lass="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 article-container">
<div class="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div class="row meta">
<div class="col-md-9 meta-category"><a href="#">CATEGORY</a>
</div>
<div class="col-md-2 col-md-offset-1 meta-view">124</div>
</div>
</div>
</div>
</div>
</div>
关于html - 框阴影不会出现在等高 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38039433/