Der Box-Schatten erscheint nicht am unteren Ende der gleichen Höhe divs

Question

Ich habe ein Layout bestehend aus reaktionsfähigen Boxen, die gleiche Höhe haben. Sie haben box-shadow, aber der untere Schatten erscheint nicht.

Ich denke, es ist, weil overflow:hidden für div#latest, die gesetzt wird, um Boxen gleiche Höhe wie es in One True Layout Method empfohlen wird.

HTML-Code:

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

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

Hier ist der Screenshot zeigt, wie das Problem auftritt:

Fiddle

P. S. Ich bin mit Bootstrap 3.

Answer 1

Erstens sind die IDs unique und du duplizierst IDs, also verwende stattdessen Klassen.

Da Sie Bootstrap verwenden, fehlen Sie .container, die die .row und col-*-* umschließt.

Dann gleich height haben statt dieser Hack, gibt es neue flexible Layout, das Sie verwenden können, die flexbox ist und dann die box-shadow wird sich zeigen

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

Gut, das nicht wegen overflow:hidden in #latest war, aber man riesige Anzahl von Marge und Polsterung in article, hinzugefügt, wie unten ändern und setzen Sie es Höhe ist und

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

entsprechend, Breite