- ベストアンサー
【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
お世話になります。 左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。 問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。 ↓ ↓ ↓ <img src="xxx.jpg" style="float:left; width:100px"> 画像回り込み文章～～～文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという 『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』 の説明が載っているのですが、同じように組んでも上手く行きません…。 本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？ 何卒、宜しくお願い致します。
- chalia
- お礼率81% (30/37)
- HTML
- 回答数10
- ありがとう数11
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと強引ですが、これで上手くいきました。(IE8,Firefox3で確認) ----- <div style='background-color: #eee; width: 100%; display: table;'> <img src='test.png' style='diplay: block; float:left;' /> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> </div> ----- ** ポイント - width: 100% でfloat抑止 - diplay: table で内容に合わせてブロック拡大 clearプロパティを使って入れ子にした回り込み解除は出来なかったので、width:100% で代替してます。
その他の回答 (9)
- think49
- ベストアンサー率59% (285/482)
#4,9です。 #9のサンプルをちょこっと修正しました。 - ポジショニング型を「Google Chrome」で閲覧したとき、boxCがはみ出ていたのを修正 - コンテナの中央寄せもwidth指定ではなく、margin: 0px 2% 指定に (後方互換を考慮するなら、こっちの方が楽です)
お礼
ご回答、ありがとうございました！！ float型・position型、いずれも上手く行きました！ …float型が良くないとの事なので、position型で作成したいところではありますが… それだと、『本文BOX＞メニューBOX』を保障する事が難しいページもあるので、それをどうするか…ちょっと考えてみたいと思います。 とても勉強になりました。 もっと頑張りたいと思います！ ---------------------------------------- この欄をお借りして、失礼ながら…ポイント付与の説明をさせて頂きます（_ _*))) #4にて、質問の直接的回答を下さり、かつ、 #9・#10にて、完璧なソースまでUPして下さったthink49さんに20pt良回答を。 #6・#7と、ソースとブラウザ画面までご提示下さったsalonpathさんに10ptを。 ポイントは差し上げられませんが… #1・#2にて、「clearfix」というものを教えて下さったsalonpathさん、 #3・#5・#8にてソース例とfloatの悪い点を教えて下さったORUKA1951 さんにも、深く御礼を申し上げます。 皆様、今回は本当にありがとうございました！！
補足
ご丁寧にありがとうございます！！ …今帰宅したばかりなので、手前のhtml+CSSと組み合わせてやってみます！
- think49
- ベストアンサー率59% (285/482)
#4です。 ひとまず、解決の目処が立ったようで何よりです。 ORUKA1951さんも指摘されていますが、補足の説明はちょっとわかりづらいです。 ただ、様々な要素が絡み合って説明しづらいという事情もわかりますので、 「HTMLソース」か「作成したHTMLのアップロード先URL」を開示する方向でアプローチされるといいのではないかと思います。 - 回答で掲示された「そのままのソース」で期待通りに表示されるのか？ - 改変したら正常描画できないとしたら、どの部分で正常描画できなくなるのか？ 一つ一つ問題を切り分けて、原因を突き止めていってみてはどうでしょうか。 > divとimg内のスタイルを、cssに放り込んでclassで実現させてみようとしましたが、これだとダメなのですね…。 サンプル故にstyle属性を使いましたが、外部CSSでclass,idセレクタを定義しても実現できます。 class定義したサンプルを下記URLにUPしました。 フロート型のマルチカラム(サンプル) http://vird2002.s8.xrea.com/test/okwave/qa5087003/float.html ポジショニング型のサンプルもUPしました。 ポジショニング型のマルチカラム(サンプル) http://vird2002.s8.xrea.com/test/okwave/qa5087003/position.html ポジショニング型はフッタを挿入する場合において、メインカラムの高さに注意する必要があります。 具体的には、boxBのheightがboxCより高いとboxDと重なってしまうのです。 上記URLでは、わかりやすいように問題が生じるケースにしてあります。 正しく表示するために、boxB のスタイル(height: 1000px;)を取り除いてみてください。 挙動を実感できると思います。 # 以下、蛇足ですが。 > <?xml version="1.0" encoding="utf-8" ?>～<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />の部分を、 > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> XML宣言を入れるとIE6では後方互換モードで描画され、クロスブラウザで相当苦労します。(それ以前にDOCTYPE宣言にURLがないので後方互換モードで表示されてしまいますが…。) 後方互換モードの存在は認識されているでしょうか？ 【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (2) 02-01 XML宣言によって表示モードが変わる問題を修正 | クリエイティブ | マイコミジャーナル http://journal.mycom.co.jp/special/2006/ie7beta2/001.html Google検索: DOCTYPE スイッチ http://www.google.co.jp/search?q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&lr=lang_ja&ie=utf-8&aq=t&rls=org.mozilla:ja-JP:official&client=firefox-a
お礼
#9にも記させていただきましたが、ご丁寧にページまでUPしてご説明下さいましてありがとうございます！ 早速、ソースを参考させて頂き、試してみたいと思います。 「HTMLソース」か「作成したHTMLのアップロード先URL」を開示… 留意致します。 …floatを使用した２カラム作成方法など、ネット検索でよく見受けられたので、わりと容易く問題が解決できるのかもしれない…と思ったのが間違いでした。 作成しているファイルの拡張子（.html+CSSでした）も記さなかった事にも、あとから気付きました。 （質問ページのカテゴリがHTMLなので、.htmlと理解されるだろうと勝手に思い込んでおりました） 以降、重々気をつけます。 XML宣言はちょっとよくわからないです…。 実際作成するページでは、XML宣言は使わないつもりでした。 上記URL、ありがとうございます。 勉強してみたいと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.3 No.5 ORUKA1951です。 そういうアプローチでは何時までも解決しません。 提案があると、その都度新しい条件が加わってうまく行かないと言われる。確かにはじめのうちは、そうなる理由もわからないでもないですが、あらかじめ、(可能限り)すべての条件をお示しください。 【例】 1) 左右２分割であり、最後にフッターとしてwindows幅のフッターが配置する。 2) 左枠には、メニューに該当すものが入る。 幅はウィンドウ幅の30%である。 高さはいつも右ブロックより高い（低い／色々） メニューにはページ内の目次、サイト内の目次のリンクをリストでマークアップしてある。 3) 右枠には、本文が入る floatを含む--普通は考慮しないでよい。 4) フッターは左右いずれか高いほうの下部に入る。 5) 左右のブロックは最低高さを固定する 6) 上部には宣伝用のブロックが強制的に挿入される。 ・・・・ など、デザインに影響しそうなものはすべて示すこと。 基本的には、floatで割付はしないほうが良いです。お気づきのようにfloatされる時点でIEはブロックの大きさの解釈を誤ります。しかもモードによって変化する。あくまで記事内に留めるべきです。
お礼
アドバイス、ありがとうございます。 #9さんのお礼欄にも書かせて頂きましたが、ようは、 「この質問の回答を得る為にはどこまでの情報開示が必要なのか」という事を、こちらが知悉していなかった、という事に尽きるのでしょう。 お書き頂いた海事内容については、次回質問する際に留意したいと思います。 ただ、申し上げるならば… そもそも、質問は「floatを使用した２カラムデザイン」であるという事。 対して、#3にて頂いたアドバイスは「floatを使用すべきでない、positionを使用する事」。 続いて、#5にてお書き下さったposition用のソース。 しかしこのソースでは、私の手持ちブラウザ（Opera・Luna5・firefox3.05）全て、どれも意図する表示になりませんでした。 ORUKA1951さんのお手持ちのブラウザでは、#5にお書き下さったソースのみで、質問内容を網羅した表示となりましたでしょうか？ ちなみに、positionを利用したソースで何が足りなかったかは、#9さんがご提示して下さったソースにて理解する事が出来ました。 「アドバイス」を下さった事は感謝致します。 ただ…『専門家』でいらっしゃるのですよね？ 講釈より、質問内容を網羅した上でのご回答を下さった方が、さほど詳しくない人間には助けとなる事を…お気に止めて頂けると幸いです。
- salonpath
- ベストアンサー率48% (194/399)
ほんとですか？？ こちらだとそういった状態にならないです。。。 ちなみに確認はfirefox3.0.11、safari4、Google Chrome、IE6（ie tester）、IE8でやってます。 先ほどのソースをコピペで持ってくるとimgのリンクが壊れたり、テキストのスペースがおかしかったりしますが、それでもテキストが重なったりはしてません。 何が違うんですかねぇ、お力になれずすみません。
お礼
表示異常が生じている画像を質問欄に添付しました。 （小さくてすみません…画像部分と本文部分に枠線をつけてみたのですが…それでも見難いですね；；） 画像左側は全て、コピペ→test.htmlで保存したものです。 （コピペで生じる保存できない文字は除去しました） 画像右側は、 <?xml version="1.0" encoding="utf-8" ?>～<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />の部分を、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> に変更→test2.htmlで保存したものです。 ブラウザは、上から Firefox3.0.5、Lunascape5.0.5のGecko、同Luna5のWebkit、一番下がOpera9.64（これは、test2.htmlです＞＜） となっています。 【IE6・Lunascape5.0.5のTrident】 test.html…IE6は何も表示されませんでした。 test2.html…意図する表示。 【Opera9.64】 test.html・test2.htmlともに、画像と同じ表示。 画像左回りこみは成功しているものの（やや文字が画像にかぶっている）、画像右回りにおいては、空白が生じている。 Firefox3は、私がバージョンアップさせていないせいなのかもしれませんが…本当に何が違うのでしょう？？ 不思議です…。 お返事下さいましてありがとうございます。 とても勉強になります！！
- salonpath
- ベストアンサー率48% (194/399)
可変のコーディングしたことがないので質問を勘違いしてるかもしれませんが以下のhtmlだと問題ありますか？ <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2カラム可変</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- * { margin:0; padding:0; } body { background:#333; } #wrap { padding:10px; } #header, #footer { background:#d8d8d8; } #contents { width:100%; background:#fff; } #primary { background:#fff; float:right; width:100%; margin-left:-200px; } #doc { margin-left:200px; } .pictleft { float:left; margin:0 10px 10px 0; } .pictright { float:right; margin:0 0 10px 10px; } #secondary { float:left; width:200px; background:#dfe3eb; } .fix { clear:both; } /* clearfix -------------------------------------------------- */ #contents:after, p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* for ie */ * html #contents, * html p { display:inline-table; } /* hides from ie-mac \*/ #contents, p { height:1%; } /* end hide from ie-mac */ --> </style> </head> <body> <div id="wrap"> <div id="header">header</div> <!-- --> <div id="contents"> <div id="primary"> <div id="doc"> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p class="pictleft"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="80" height="100" alt="" /></p> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p class="fix">適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p class="pictright"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="80" height="100" alt="" /></p> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p class="fix">適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> <p>適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ 適当な内容Ｃ</p> </div> </div> <div id="secondary"> <p>適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ</p> <p>適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ</p> <p>適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ</p> <p>適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ</p> <p>適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ</p> <p>適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ 適当な内容Ｂ</p> </div> </div> <!-- --> <div id="footer">footer</div> </div> </body> </html>
お礼
ご回答ありがとうございます。 試してみたところ、IE・Operaでは全く問題がありませんでした。 が…Luna5使用のGecko（単体・Firefox3も）・Webkit（Safari等のエンジン）では、<div id="secondary">の部分は問題ありませんでしたが、<div id="doc">の部分が、ページ上端に凝縮（無理矢理重なって）表示され、フッターも<div id="secondary">の大きさを無視して、画面中央よりやや上ぐらいの位置に表示されてしまいました。 何故なのか理由がわかりませんが…これだと、残念ながら問題があるようです…。 ソース詳細書いて下さいましてありがとうございました。 勉強になります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.3 ORUKA1951です。 あくまでabsoluteは親ブロックに対してですから、 <div id="page"> <div id="menue"> </div> <div class="content"> </div> </div> <div id="pageInfo"> </div> とでもしておいて、 div#page{position:relatine;padding-left:31%;} div#menue{position:absolute;width:30%;top:0px;left:0px;} とかでよいはず。 absoluteは、直近の先祖がstatic(初期値)以外でpositionを指定されていれば、その内部での絶対配置です。 ですので挿入される要素以降をposition:relativeでまとめて括ればよいはずです。
お礼
ご回答ありがとうございます。 ちょっとやってみます。 結果は後ほど、補足欄に記させて頂きます（_ _*)))
補足
試しましたが、ダメでした。 IE…フッターが左メニューの大きさを無視して表示されてしまう。 Opera・Firefox・Safari… フッター表示位置は問題なし。 ただし、画像回り込み後の、「通常の文章」が左メニューの高さ分、間が空いてしまう。 …という問題が生じました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
カラム構成をfloatでするようなサンプルがたくさんありますが、本来は間違いだと思います。 floatは本来記事中で現れる要素をinlineであるかblockであるから関わらずblockとして本文を回り込ませるためのプロパティで、カラムを作るためじゃない。 また、シェアの大きなIEではfloatに関してとても多くのバグがあります。それらをいちいち修正するのは大変です。 単純に、ブロックをabsoluteなりrelativeで分割するほうが楽です。
お礼
ご回答ありがとうございます。 absolute等での指定も試したのですが… htmlファイルの<body>以降と、</body></html>タグの前に自動挿入されるdivがある為、上手くいきませんでした。 （自動挿入されるdivの中の要素？が、どんな幅・高さになるかはその時によって異なります。 <body>以降は問題ないですが、</body></html>以下のものが上手くいかなかったのです…） 以上の条件で、absolute・relativeを使用してカラムを組む方法、もしくは参考となりそうなURLを教えて頂けるととても助かります。
- salonpath
- ベストアンサー率48% (194/399)
じゃあ先ほどの.hogehogeにclearfixを /* clearfix */ .hogehoge:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* for ie */ * html .hogehoge{ display:inline-table; } /* hides from ie-mac \*/ .hogehoge{ height:1%; } /* end hide from ie-mac */
お礼
ご回答ありがとうございます。 IEでは上手く行きました！！ …が、Firefox・Operaではダメでした…。 「clearfix」で検索してみて、 .clearfix { display: inline-table; } /* hides from ie-mac \*/の方には、 .clearfix { display: block; } （.clearfixは、「.hogehoge」に変更） を付け加えてみましたが、ダメでした…。 もうちょっと探してみます…。
- salonpath
- ベストアンサー率48% (194/399)
<div class="hogehoge"><img src="xxx.jpg" style="float:left; width:100px"> 画像回り込み文章～～～文章 </div> <br style="clear:both"> みたいにdivで囲んでみてもだめですか？
お礼
ご回答ありがとうございます。 念の為試しましたが… 残念ながら、この方法ではダメでした。 div等なら、 【A】---<div class="X"> 【B】---<div class="Y"> ～内容～ 【B】---</div> 【A】---</div> という構成（Xが親要素・Yが子要素…的？）が成り立つ訳ですが、floatに関しては、親要素・子要素に関係なく、clearを使用した時点で回り込みの解除、となってしまう…ようなのです。 また良い案・回答がございましたら宜しくお願い致します＞＜；
関連するQ&A
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- floatとclear
ボックスが３つあって、一つ目にfloa rightをし、２つ目にfloat leftをして、３つ目のボックスでfloatを解除する場合、clearはleftだけでいいですか？ rightは２つ目のfloat leftで解除されていますか？
- 締切済み
- CSS
- 段組でfloat:leftとfloat:rightの違い
こんにちは！ 今スタイルシートで段組をやっているんですが 2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります 段組の間のスペースが広くなったり狭くなったりです firefoxで表示するのに左をfloat:left、右をfloat:rightにすると 右側の段組が実現されず下に落ちてしまいます。 通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか？ 過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で どうにも判断がつかず悩んでいます。 3カラムでもfloat:left float:left float:left とやっているのもあるので こちらが正しいのかな？とも思いましたが やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- CSSでfloat:leftを当てたら表示が崩れる
【緊急】はじめまして、非常に困っておりますので皆様のお力を貸してください。 ちなみに初心者なのでわかりやすくご教示頂けると助かります。 wordpressでnextgen-galleryというプラグインを使用して写真のギャラリーを作成しました。 該当のURLです。 http://6924d63e37dc33ef.lolipop.jp/works/ CSSで左にfloatさせる事で一列に5枚表示されるのですが、二段目（6枚目移行）に表示される画像の位置が左からではなく右からであったり、右から2枚表示され残り一枚だけ3段目に表示されてしまったりします。 仮に8枚の画像があった場合「■」を一枚の写真(□は一枚分のスペース)とすると ■■■■■ ■■■□□ と表示したいのですが ■■■■■ □□□■■ ■□□□□ と表示されてしまうのです。 ブラウザ間で表示の違いはありません。 ブラウザのデベロッパーツールを使い、CSSの各項目を思いつく限り無効にしたり設定を変えて表示を確認したり、それらしい箇所のCSSを実際に書き換えてみたりしましたが改善しません。 こちらがプラグインのCSSです。 /* ----------- Gallery style -------------*/ .ngg-galleryoverview { overflow: hidden; margin-top: 10px; width: 100%; clear:both; display:block !important; } .ngg-galleryoverview .desc { /* required for description */ margin:0px 10px 10px 0px; padding:5px; } .ngg-gallery-thumbnail-box { float: left; } .ngg-gallery-thumbnail { float: left; margin-right: 7px; margin-left: 3px; text-align: center; } .ngg-gallery-thumbnail img { background-color:#FFFFFF; border:1px solid #A9A9A9; display:block; margin:4px 0px 4px 0px; padding:4px; position:relative; } .ngg-gallery-thumbnail img:hover { background-color: #dddddd; } .ngg-gallery-thumbnail span { /* Images description*/ font-size:90%; padding-left:5px; display:block; } .ngg-clear { clear: both; } なおjQuery Colorboxというプラグインを組み合わせて使用していますが、プラグインを無効にしても改善しなかった為、記載はしていません。 私ではいくら調べても原因がわからないのでほとほと困り果てております。 何卒よろしくお願いします。
- ベストアンサー
- CSS
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- float & clear
質問の概要は以下の通りです。 CSSを使用しています。 可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。 さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。 このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。 ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。 これを防ぐ方法はありますか？ もしくは、全体的に構造がおかしいならば、ご指摘ください。 すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか？ 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- 締切済み
- HTML
- float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- float:leftを使用して全体を中央寄せしたい
html勉強中のものです。 float:leftを使用したdivすべてbody全体の中央寄せにしたいです。 下記のソースから教えて下さい。 html -------------- <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="shift_jis"> <title>Director Blog</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header> <hgroup> <h1 id="header">Why not?</h1> </hgroup> <ul class="header"> <li>menu</li> <li>info</li> <li>list</li> </ul> </header> <div class="float left"> <div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150"> </p> <h1 class="float left"> Miyuki Yamanaka</h1> <p class="float left"> Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p> </div> </body> </html> -------------- css -------------- charset "utf-8"; /* ---------------------------------------------- This style definition is initiarize. ------------------------------------------------- */ body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td { margin-right: 0 auto; margin-left: 0 auto; padding: 0 auto; } div.float left{ float:left; } div.cc { width:200px; background: #FAFAD2; float: border-style: none; margin-right: auto; margin-left: auto; padding: 20px; position: relative; overflow: hidden; layout-grid-line:200px; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px #000; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } -------------- よろしくお願いします！
- 締切済み
- CSS
お礼
ご回答ありがとうございます。 Lunascape5を使用した、Trident・Gecko・Webkit、及びOperaで上手く行きました！ divとimg内のスタイルを、cssに放り込んでclassで実現させてみようとしましたが、これだとダメなのですね…。 難しいですね＞＜； 現状、この方法が最善策のように思いました♪