箱形阴影不出现在同等高度的底部

Question

我有一个由具有相同高度的响应箱组成的布局。他们有box-shadow但底部阴影不会出现。

我认为这是因为overflow:hidden为div#latest它被设置为使箱子等于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; 
} 

下面是截图显示如何出现问题：

Fiddle

附：我使用的引导3.

Answer 1

首先，ID是唯一并且您正在复制ID，所以请使用类。

由于您正在使用引导程序，因此您缺少.container，它包含.row和col-*-*。

然后，有平等的height的而不是黑客，有新的灵活的布局就可以使用，这是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>

Answer 2

嗯，这是不是因为overflow:hidden在#latest，但你加入article margin和padding的数量庞大，如下更改，然后设置它的高度，并相应地宽，

#article { 
    padding: 0; 
    background: #FFF; 
    height: auto; 
    box-shadow: 0px 5px 3px 1px rgba(0,0,0,.2) 
}