2

いくつかのテーマを一緒に切り刻んで変更することで、レイアウトを構築しています。そのレイアウトでは、この CSS でトリガーされるすべてのコンテンツの背後に影があります。

body {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

だから今、私はテーマを自分で再構築しているので、div と css を好きなように構成できます。元のデザインには、テキストが右に配置されたヘッダーがありました。再構築のために、ヘッダーに 3 列のレイアウトを作成して、左側に写真を追加し、中央にいくつかのコンテンツを追加できるようにしました。

新しいレイアウトで上記のシャドウ コードを使用できません。コンテンツの周りに影を落とすことはありません。代わりに、以下のコードを取得して 3 つの列のそれぞれの Div ID の CSS にドロップすると、影がドロップされます...ただし、影は 2 番目の列と 3 番目の列にこぼれます

-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;

今は HTML と CSS が得意ではありませんが、最善を尽くしています。3 つの列を DIV に入れ、影をその div にドロップしようとしましたが、それでも機能しませんでした。以下のコードの*記号がある場所に列を突き合わせてみました

 <div id="blah">**************</div>

欠けているものについて何か提案はありますか？

4

1 に答える 1

1

外側の div にドロップ シャドウを適用するのは正しい考えですが、内側の列を作成するために div を使用している場合は、最後の要素に clearfix を適用する必要があります。

<div id="blah">
   <div class="third">First</div>
   <div class="third">Second</div>
   <div class="third">Third</div>
   <div class="clear"></div>
</div>

CSSで

.clear { clear:both; }

これはあなたが探していた効果ですか？ http://jsfiddle.net/LcBUX/3/

于 2013-03-29T01:53:28.303 に答える