Question

我正在为一个学校作业创建一个投资组合网站，但我遇到了一个烦人的小事。我有两个同一个班级的元素。我用css为这个类定义了一个阴影，第一个元素显示了盒子阴影，但第二个元素没有显示...

对我而言，这两个元素现在应该有一个阴影似乎是合乎逻辑的。这是网页：http://wouterjanson.nl

以下是HTML的部分：

<div class="container">
    <main class="content">
        <article class="content_item">
            <img src="img/post_img_home.png" alt="Html code">
                <h1>Home - Portfolio Wouter Janson</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor lorem sit amet quam condimentum pretium. Etiam quis odio a nisl varius rutrum. Maecenas mattis mi ac est finibus, quis pulvinar lacus finibus. Mauris id dui nunc. Donec ornare eros a laoreet rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eget libero metus. Etiam at rhoncus metus, non condimentum erat. Sed sed sodales turpis, lacinia bibendum nisl. Integer sagittis metus quis lectus auctor, et elementum nisl pretium. Nulla facilisi. Proin lobortis leo nisl, a consequat turpis ullamcorper eget. Curabitur quis bibendum odio.</p>
        </article>
        <article class="content_item">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor lorem sit amet quam condimentum pretium. Etiam quis odio a nisl varius rutrum. Maecenas mattis mi ac est finibus, quis pulvinar lacus finibus. Mauris id dui nunc. Donec ornare eros a laoreet rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eget libero metus. Etiam at rhoncus metus, non condimentum erat. Sed sed sodales turpis, lacinia bibendum nisl. Integer sagittis metus quis lectus auctor, et elementum nisl pretium. Nulla facilisi. Proin lobortis leo nisl, a consequat turpis ullamcorper eget. Curabitur quis bibendum odio.</p>
        </article>
    </main>
</div>

这是CSS类：

.container {
   width: 100%;
   float: left;
   overflow: hidden;
   margin-bottom: 30px;
}
.content_item {
   background-color: #ffffff;
   border-radius: 4px;
   box-shadow: 0px 1px 1px 0px rgba(145, 145, 145, 0.5);
   margin-top: 30px;
}

Answer 1

您的容器元素上有overflow:hidden。只需删除它。

.container {
width: 100%;
float: left;
/* overflow: hidden; */
margin-bottom: 30px;
}

Answer 2

您已在容器上提供padding-bottom

.container {
width: 100%;
float: left;
overflow: hidden;
margin-bottom: 30px;
padding-bottom: 10px;
}

Answer 3

但内容div（.content_item的父级）为582而不是479 :) .content{height: 582px;}

CSS Box阴影不出现在具有相同类的元素上

3 个答案: