箱形陰影不出現在同等高度的底部

我有一個由具有相同高度的響應箱組成的佈局。他們有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.

來源

2016-06-26 Kerem Zaman

你應該開始把你的'id's變成'class'es。 ID必須是唯一的，因此每個頁面只能使用一次。 – Pevara

首先，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>

來源

2016-06-26 14:56:50 dippas

謝謝，它像一個魅力。當我使用.container時，頁面中的其他內容似乎有問題。當我不這樣做時，它會正常工作。將來會導致問題嗎？ –

它會導致水平滾動條，請參閱：http://getbootstrap.com/css/#grid – dippas

嗯，這是不是因爲overflow:hidden在#latest，但你加入article margin和padding的數量龐大，如下更改，然後設置它的高度，並相應地寬，

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

來源

2016-06-26 14:51:34 frnt

這不是我的解決方案，我試圖爲流體盒設置相同的高度，並且可以使用我提到的頁面中的方法。 –

箱形陰影不出現在同等高度的底部

回答

相關問題