14

私はサイトを開発していますが、3 つの異なるセクションにボックスの影が表示され、下部に向かって問題が発生しています。境界線を 3 つすべてに表示したいのですが、左右にしか表示されません。

そのセクションの 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

次の 2 つの選択肢があります。

  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 に答える
2

3 つのボックス ( .three-cols-row) の親要素には、その子の上部と下部に存在するテキスト シャドウを表示するのに十分なスペースがありません。パディングを追加してみてください。

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

JS Fiddle の例: http://jsfiddle.net/KatieK/zZhxr/1/

于 2013-02-11T19:12:04.480 に答える