14

我正在开发一个网站，我在底部遇到了一个问题，三个不同部分的盒子阴影。我希望边框显示在所有三个周围，但它只显示在左侧和右侧。

这是该部分的 HTML：

<div class="three-cols-row">

<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section01.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section02.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section03.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
</div>
<div class="clearboth"></div>

这是该部分的 CSS：

.three-cols-col{ margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }
.three-cols-row { margin:0 auto; width:960px; overflow:hidden; }
.three-cols-row .three-cols-row { margin:0 -16px 0 -16px; width:auto; display:inline-block; }
.three-cols { width:248px; padding: 15px; background: #fff; -moz-box-shadow: 0 0 3px #d4d4d4;-webkit-box-shadow: 0 0 3px #d4d4d4; box-shadow: 0 0 3px #d4d4d4; }
4

4 回答 4

25

你有两个选择：

  1. 从所有父节点中删除overflow: hidden，因为这会剪切您的阴影。在您的情况下，将其从以下选择器中删除.row：.column和.three-cols.

  2. 您可以在您的: 中添加一些垂直边距.three-cols-col。而不是:margin: 0 16px 0 16px;你可以放: margin: 16px 16px 16px 16px;.

两种选择都在 Google Chrome 上进行了测试。

于 2013-02-11T18:48:50.407 回答
9

下面的语句决定了一个类似的问题：

position: relative;
于 2014-05-26T09:41:44.133 回答
2

您的 3 个框 ( ) 的父元素.three-cols-row没有足够的空间来显示存在于其子元素顶部和底部的文本阴影。尝试添加一些填充：

.three-cols-row { padding-top: 10px; padding-bottom: 10px; }

示例 JS 小提琴：http: //jsfiddle.net/KatieK/zZhxr/1/

于 2013-02-11T19:12:04.480 回答
-2 
position: relative;
z-index: 2;
于 2018-02-11T12:17:13.710 回答