Cień pudełka nie jest wyświetlany u góry ani u dołu

Question

Zajmuję się tworzeniem strony i napotykam problem w kierunku dołu za pomocą cieniowania w trzech różnych sekcjach. Chcę, aby granica pojawiła się wokół wszystkich trzech, ale wyświetla się tylko po lewej i prawej stronie.

Oto HTML dla tej sekcji:

<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> 

Oto CSS dla tej sekcji:

.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

Masz dwie możliwości:

1. Zdjąć overflow: hidden od węzeł wszystkich rodziców, ponieważ przycina on twój cień. W twoim przypadku usuń go z następujących selektorów: .row, .column i .three-cols.

2. Możesz po prostu dodać pionowy margines do swojego: .three-cols-col. Zamiast: margin: 0 16px 0 16px; możesz po prostu wstawić: margin: 16px 16px 16px 16px;.

Obie opcje zostały przetestowane w Google Chrome.

Answer 2

Element nadrzędny 3 pól (.three-cols-row) nie ma wystarczającej ilości miejsca, aby pokazać cienie tekstowe, które znajdują się na górze i na dole jego elementów podrzędnych. Spróbuj dodać trochę padding:

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

Przykład JS Fiddle: http://jsfiddle.net/KatieK/zZhxr/1/

Answer 3

Poniższe oświadczenie zdecydowała podobny problem:

position: relative; 

Answer 4

position: relative; 
z-index: 2;