Zone d'ombre ne s'affiche pas sur le haut ou le bas

Je développe un site et je suis en cours d'exécution dans une issue vers le bas avec la boîte-les ombres sur les trois sections différentes. Je veux la frontière de montrer autour de tous les trois, mais il ne s'affiche sur la gauche et la droite.

Voici le code HTML de cette section:

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

Voici le code CSS de cette section:

.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; }
Quel est exactement la question que vous vous posez? (Débordement de pile suit un format questions-réponses, et je ne suis pas complètement clair sur la question dans cette affaire.)
Retrait de votre site, le lien n'a pas de secret; les gens peuvent encore le voir en regardant l'historique d'édition. C'est toujours mieux de mettre le code ici dans la question, et ne pas utiliser un lien direct de toute façon.

OriginalL'auteur alexhoug | 2013-02-11

  1. 16

    Vous avez deux choix:

    1. Supprimer la overflow: hidden de tous les parents nœud, parce que c'est l'écrêtage votre ombre. Dans votre cas, retirez-les sélecteurs suivants: .row, .column et .three-cols.

    2. Vous pouvez simplement ajouter un peu de marge verticale de votre: .three-cols-col. Au lieu de: margin: 0 16px 0 16px;, vous pouvez simplement mettre: margin: 16px 16px 16px 16px;.

    Les deux choix ont été testé sur Google Chrome.

    J'ai choisi la deuxième option et cela a fonctionné parfaitement. Merci beaucoup!

    OriginalL'auteur Rubens Mariuzzo

  2. 6

    La déclaration suivante a décidé un problème similaire:

    position: relative;

    OriginalL'auteur isxaker

  3. 0

    L'élément parent de votre 3 boîtes (.three-cols-row) n'ont pas assez d'espace pour afficher le texte de l'ombre qui existe sur le haut et le bas de ses enfants. Essayez d'ajouter du rembourrage:

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

    Exemple JS Fiddle: http://jsfiddle.net/KatieK/zZhxr/1/

    OriginalL'auteur KatieK

  4. -1
    position: relative;
z-index: 2;
    Comment la position et le z-index de changement de l'ombre? Veuillez préciser votre réponse, de sorte qu'il peut aider l'OP.
    Alors que ce code peut répondre à la question, de fournir un contexte supplémentaire concernant comment et pourquoi il résout le problème serait d'améliorer la réponse à long terme de valeur.

    OriginalL'auteur Adham Amiin