Ящик теней не отображается сверху или снизу

Question

Я занимаюсь разработкой сайта, и я сталкиваюсь с проблемой в нижней части с тенями на трех разных разделах. Я хочу, чтобы граница отображалась вокруг всех трех, но она отображается только слева и справа.

Вот 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; } 

Answer 1

У вас есть два варианта:

1. Удалите overflow: hidden из все узлы родителей, потому что это отсекает тень. В вашем случае удалите его из следующих селекторов: .row, .column и .three-cols.

2. Вы можете добавить только вертикальное поле к своему: .three-cols-col. Вместо: margin: 0 16px 0 16px; вы можете просто положить: margin: 16px 16px 16px 16px;.

Оба варианта были протестированы в Google Chrome.

Answer 2

Родительский элемент ваших 3-х ящиков (.three-cols-row) не имеет достаточного пространства для отображения тени текста, которая существует в верхней и нижней части ее дочерних элементов. Попробуйте добавить некоторое дополнение:

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

Пример JS скрипку: http://jsfiddle.net/KatieK/zZhxr/1/

Answer 3

Следующий оператор решил аналогичную проблему:

position: relative; 

Answer 4

position: relative; 
z-index: 2;