html - 如何将框阴影添加到包含的 div？

Question

所以这是我所在的位置:https://codepen.io/YellaChevy/pen/odYxrg

请原谅我的标记，我是 super 新手，我想弄清楚的是如何将一个整体的 box-shadow 属性添加到“dogBlock”和“infoBlock”？我觉得它与我的 html 结构有关，但不确定如何调整它以使其看起来像这样:https://www.pages.xyz/

我可以从 pages.xyz 网站上看到它们包含多个 div 但只有一个整体框阴影，这有意义吗？

提前致谢!

<section>
<div class="container">

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_1.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_2.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_3.jpg"></a>
    </div>

</div>
<div class="container">

    <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
    </div>

    <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
    </div>

    <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
    </div>

</div>

 .container {
max-width: 1200px;
overflow: hidden;
margin: 0 auto;}

.boxShadow {
box-shadow: 0 10px 6px -6px rgba(255, 255, 255, 0.2);}


.dogBlock {
width:33.333%;
float: left;
margin-top: 80px;}

.infoBlock {
color:#000;
width:33.333%;
float:left;
background-color:rgba(236,236,236,1.00);
padding: 20px;
margin-bottom: 280px;}

Answer 1

您必须将每个元素的图像部分和文本包装到单独的 div 中才能获得您要查找的结果。试试这个代码。

<section>
    <div class="container">
        <div clss="boxwrap">
        <div class="dogBlock">
            <a href="#"><img src="Assets/image_1.jpg"></a>
      <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_2.jpg"></a>
      <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_3.jpg"></a>
      <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
      </div>
        </div>
      <div class="clear"></div>
    </div>
    </div>
</section>

.container {
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}
.boxwrap {
  margin-left: -15px;
  margin-right: -15px;
}


.dogBlock {
    width:calc(33.333% - 30px);
    float: left;
    margin-top: 80px;
  margin-left: 15px;
  margin-right: 15px;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.infoBlock {
    color:#000;
    background-color:rgba(236,236,236,1.00);
    padding: 20px;
    margin-bottom: 280px;
}
.clear {
  clear: both;
}