- 締切済み
safariだけCSSが崩れてしまいます
safariだけCSSが崩れてしまいます。 初心者ですが、教えて下さい。 コンテンツ部分の中に、画像(説明文付き)を横並びに3列並べて表示するためにfloatで指定してあります。 下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と3が下に落ちて崩れてしまいます。 1 2 3 4 5 6 どのようにしたら横に並んでくれるのか、わかりません。。 どうかお詳しい方、ご教授下さい。 ______________________________________ #secondary { float:left; width:705px; padding:10px 0 0 15px; margin:0; } .index .module { float:left; width:210px; margin:0 17px 0 0; padding:0 4px; text-align:left; } .galleries { background:#eee; float:left; width:100%; margin:0 0 15px; position:relative; } .gallery .galleries { float:left; position:relative; width: 720px; margin:0 0 15px; padding:0; list-style:none; padding-top:10px; line-height:1.4em; } .gallery .galleries .thumb { float:left; margin:0 10px 10px 0; } .index .galleries { margin-bottom:5px; } .galleries ul { float:left; margin-left:0; margin-bottom:0; list-style:none; text-align:left; } .galleries li { background-image:none; float:left; position:relative; width:220px; height:6.4em; overflow:hidden; margin-bottom:0; padding:75px 0 1.6em 15px; } .archive .galleries li { height:10.5em; } .galleries h3 { margin:0 10px 0 4px; font-size:100%; } .galleries h3 a, .galleries a.img, .galleries h3 a:visited { border-width:0; } .galleries .img { position:absolute; top:4px; left:15px; } .galleries .img img { display:block; } .galleries p { margin:0 10px 0 4px; } .galleries div { margin:0 4px; } .gal { background:url("../images/bg_gal.gif") 11px 0px no-repeat; margin:0; } html>body .gal { background-image:url("../images/bg_gal.png"); }
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- k0021
- ベストアンサー率26% (32/120)
No.1さんゆうとうり 原因を推測なんてませんが。 3行の段組を記述します。必要の内容を記述しておかしくなった内容を検討してください。 <div style="width:705px;clear:both;"> <div style="width:210;float:left;margin-right:1.2em;">内容1</div> <div style="width:220;float:left;">内容2</div> <div style="width:210;float:left;">内容3</div></div> <div style="width:720px;clear:both;"> <div style="width:220;float:left;margin-right:1.2em;">内容4</div> <div style="width:220;float:left;">内容5</div> <div style="width:220;float:left;">内容6</div></div> float:left; width:705px; は、 width:705px;clear:both; でないですか。 clear:bothを指定しないSsfari参照したプラウザ表示状態を添付します
- ORUKA1951
- ベストアンサー率45% (5062/11036)
驚くほど煩雑なCSSを読み取ってHTMLを想像して原因を推測なんて勘弁してください。 それで推測される原因も正解でない場合が多いでしょう。 下記の点だけ教えてください。 ・文書構造 本文中のどの部分に画像リストがあるのか ・貼り付ける画像のサイズ ・その画像は<a href=""></a>で囲まれているのか? ・画像リスト周りのマークアップの凡例
お礼
ご回答ありがとうございます。 かなり時間が経ち過ぎてしまい申し訳ございません。 いろいろと試してみましたが解決ならず、諦める事に致しました。
お礼
ご回答ありがとうございます。 かなり時間が経ち過ぎてしまい申し訳ございません。 いろいろと試してみましたが解決ならず、諦める事に致しました。