Html 长方体阴影不为'；t出现在等高div的底部_Html_Twitter Bootstrap_Css_Twitter Bootstrap 3

Html 长方体阴影不为'；t出现在等高div的底部

html twitter-bootstrap css twitter-bootstrap-3

Html 长方体阴影不为'；t出现在等高div的底部,html,twitter-bootstrap,css,twitter-bootstrap-3,Html,Twitter Bootstrap,Css,Twitter Bootstrap 3,我有一个由高度相等的响应框组成的布局。它们有框阴影，但底部阴影不显示我认为这是因为overflow:hiddenfordiv#latest设置为使框与中建议的高度相等 HTML代码： <div id="latest"> <div id="section-header"><h4>NEWS</h4></div> <div class="row"> <di

我有一个由高度相等的响应框组成的布局。它们有

框阴影

，但底部阴影不显示

我认为这是因为

overflow:hidden

for

div#latest

设置为使框与中建议的高度相等

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>

以下是显示问题发生方式的屏幕截图：

p.S.我正在使用Bootstrap 3

这并不是因为

溢出：在#latest
中隐藏了，而是您在文章
中添加了大量的边距和填充，如下所示进行更改，然后相应地设置其高度和宽度
#article {
    padding: 0;
    background: #FFF;
    height: auto;
    box-shadow: 0px 5px 3px 1px rgba(0,0,0,.2) 
} 

这并不是因为溢出：在#latest
中隐藏了，而是您在文章
中添加了大量的边距和填充，如下所示进行更改，然后相应地设置其高度和宽度
#article {
    padding: 0;
    background: #FFF;
    height: auto;
    box-shadow: 0px 5px 3px 1px rgba(0,0,0,.2) 
} 

首先，ID是唯一的，并且您正在复制ID，所以请使用类
由于您使用的是引导，因此缺少包装行
和列-*-*
的.container

然后，为了使高度相等，可以使用一种新的灵活布局，即flexbox
，然后将显示box阴影

正文{
背景：#ebebeb；
}
.行{
显示器：flex
}
.物品容器{
填充：1em；
背景：ddd；
显示器：flex
}
.文章{
填充：0；
背景：#FFF；
高度：自动；
长方体阴影：0 1px 3px 0 rgba（0,0,0,2）
}
.文章数字{
最大宽度：100%；
高度：自动；
}
.文章图img{
/*身高：30%*/
}
.第h4条{
填充：1em；
}
.第h4条a{
文字装饰：无；
颜色：#000；
}
.第h4 a条：悬停{
文字装饰：下划线；
}
梅塔先生{
颜色：#ccc；
宽度：100%；
左：1米；
}
梅塔{
文字装饰：无；
颜色：#ccc；
}
.a:悬停{
文字装饰：下划线；
}
.章节标题{
高度：40px；
宽度：100%；
背景：#FFF；
显示：表格；
左边框：5px#FFC640实心；
左边距：0；
边缘顶部：2米；
长方体阴影：0 1px 3px 0 rgba（0,0,0,2）
}
.章节标题h4{
左：1米；
垂直对齐：中间对齐；
显示：表格单元格；
}

新闻
124
124
124
124
大多数阅读
124
124
124
124
首先，ID是唯一的，并且您正在复制ID，所以请使用类
由于您使用的是引导，因此缺少包装行
和列-*-*
的.container

然后，为了使高度相等，可以使用一种新的灵活布局，即flexbox
，然后将显示box阴影

正文{
背景：#ebebeb；
}
.行{
显示器：flex
}
.物品容器{
填充：1em；
背景：ddd；
显示器：flex
}
.文章{
填充：0；
背景：#FFF；
高度：自动；
长方体阴影：0 1px 3px 0 rgba（0,0,0,2）
}
.文章数字{
最大宽度：100%；
高度：自动；
}
.文章图img{
/*身高：30%*/
}
.第h4条{
填充：1em；
}
.第h4条a{
文字装饰：无；
颜色：#000；
}
.第h4 a条：悬停{
文字装饰：下划线；
}
梅塔先生{
颜色：#ccc；
宽度：100%；
左：1米；
}
梅塔{
文字装饰：无；
颜色：#ccc；
}
.a:悬停{
文字装饰：下划线；
}
.章节标题{
高度：40px；
宽度：100%；
背景：#FFF；
显示：表格；
左边框：5px#FFC640实心；
左边距：0；
边缘顶部：2米；
长方体阴影：0 1px 3px 0 rgba（0,0,0,2）
}
.章节标题h4{
左：1米；
垂直对齐：中间对齐；
显示：表格单元格；
}

新闻
124
124
124
124
大多数阅读
124
124
124
124
您应该首先将id
s转换为class
es。ID必须是唯一的，因此每页只能使用一次。您应该首先将ID
s转换为class
es。ID必须是唯一的，因此每页只能使用一次。它是唯一的