13

編集：より一般的な質問：私はdivのボックスシャドウが好きですが、ボックスシャドウのdivの真下にdivを配置すると、zインデックスをいじっても、シャドウの下部が上部に重ならないようになります。それで、ボックスシャドウは別のdivをオーバーレイできないように見えますか？どんなアイデアでも素晴らしいでしょう！

元の質問-レイアウトに設計図を使用しています。これは、.containerがあり、その中に.containerが950px含まれていることを意味し#contentます。

この場合、#contentコンテナ全体がいっぱいになるので、もそうです950px。

にドロップシャドウを付けたいのです#contentが、に表示するスペースがないため、シャドウが途切れるという問題があり.containerます。

回避策は、幅を狭くする#contentことですが、それは私がすでに持っているレイアウトの配置を台無しにし、狭すぎるように見えます。

ボックスシャドウを取得して、親コンテナを無視してその上に表示する方法はありますか？これは私が推測する特定の青写真ではありませんが、それは文脈です。ありがとう！

編集：

body .container {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
body .container:after {
    clear: both;
    content: "";
    display: table;
}
#content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 950px;
    box-shadow: 0 0 4px black;
    -moz-box-shadow: 0 0 4px black;
}

#contentに直接あり.containerます。ドロップシャドウを付けると#content、幅を縮小するまで表示されません。幅を縮小すると、内側の要素が乱れます。

4

4 に答える 4

3

.container要素にパディングを追加して#content、必要な幅にとどまるようにします。

于 2011-09-14T12:30:35.200 に答える
2

すでに明確な修正を使用しているのでoverflow: hidden、は必要ありません。.containerだから、あなたはそれを捨てることができます：http: //jsfiddle.net/kizu/gDXLf/

于 2011-09-15T21:40:17.783 に答える
1

それはすべてあなたが達成しようとしていることに依存します。

リストアイテムのインラインブロックグループで問題が発生していました。右の影は、ホバーするとその隣のリストアイテムによって切り取られました

簡単なハックは、要素に以下を追加することです。

li:hover {
    transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
}

実例

ただし、これは特定のシナリオでのみ機能する可能性があります。上記の例でのみテストしました。

于 2014-07-14T02:56:49.277 に答える
0

.containerの幅を広くし（固定幅では960を完全に許容できます）、＃contentを.containerの中央に配置することができます。それはあなたのために何かを台無しにしますか？

于 2011-09-14T12:29:00.890 に答える