- ベストアンサー
CSSでの回り込みの解除について
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは <p class="clear"> の方が記述か簡単なため、お勧めです。 ただ、ブラウザに依って表示が崩れる場合には、工夫が必要となります。 <p class="clear"> で表示が崩れるケースがあった場合には、ブラウザと前後のソースを含めた具体的なソースを教えてください。
関連するQ&A
- floatを使って画像にテキストを回り込ませて解除する時
floatを使って画像にテキストを回り込ませて解除する時 clear:both;などを使うけど、テキストの量が少ないと上手く解除されないですよね。そのとき、下記のようなCSSを書くのですが、これだとMacのIEではうまいこと解除できていません。 どう書いたら良いでしょうか？ 【HTML】 <div class="box"> <img> <p>テキスト</p> </div> 【CSS】 div.box { zoom: 100%; background-color: #CCC; padding: 10px; width: 500px; } div.box:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; } div img { float: left; }
- 締切済み
- CSS
- CSSのfloatの回り込み解除について
現在は、<dt>にfloat:leftを指定して、.clearを作成し、<div class="clear"></div>で解除しています。 ただ最近floatを頻繁に使うようになり、<div class="clear">が多くなってしまいどうにかならないか探しているところです。 私がやりたい事は、<dl>に直接clear属性を付属できないかです。 これができれば、回り込み解除の指定がいらなくなるので、助かるのですが、<dl>に入れると、<dt>のfloatも解除されてしまいます。 下記がサンプルソースです。 CSS： dl {clear:both;} dt {float:left;width:130px;border:solid 1px #CCC;} HTML <dl> <dt>SAMPLE</dt> <dt>SAMPLE</dt> <dt>SAMPLE</dt> </dl> <p>clearを設置しなくても回り込み解除</p> これが理想です。 やはり、clearは別で設置しなければならないんでしょうか？
- ベストアンサー
- HTML
- 【CSS】不具合の原因がわかりません。
すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます（縦に3つ並びます）。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 （企業によるガイドラインなので詳しくは書けません。すいません・・・。） 「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか？ よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }
- 締切済み
- HTML
- 初心者です 画像横に文字を入れたい ｃｓｓ
web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul> <li><a href="index.htm"><img src="画像"width=""height=""></a></li> <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}
- ベストアンサー
- その他（インターネット・Webサービス）
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- cssの記法について
サイトのCSSを見ていると、 padding: 0 15px; という表記を目にします。 padding:0px 15px;ならわかるのですが、このように記述するのはなぜなのでしょうか。 もう一つ、 .hoge:after { display: block; clear: both; content: ""; } こういうのをよく見ます。 divでcontainer代わりに使っている要素の後にこれを挿入しているイメージなのですが、 これはなぜ挿入されているのでしょうか。
- 締切済み
- HTML
- CSSでフローとした際の親要素の高さ
CSSでfloatしたものって、親要素のheightに反映されません？ただ親要素に背景があって、反映されないと凄く困る感じで・・・。 それってどうやって回避すればいいでしょうか？ 取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、 なにか良い逃げ方ってないでしょうか？？ ご存知の方、宜しくお願いいたします。
- ベストアンサー
- HTML
- cssのfloatについて
cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。 現状の構成は具体的に以下のような感じです。 <div id="main"> <div id="left">レフト</div> <div id="center">センター</div> </div> #main:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } #left {float: left;} #center { float: right} これをoverflowで実現するにはどうすればいいのでしょうか？ また、floatを使用しないで実現するメリットはなんでしょうか？
- ベストアンサー
- HTML
- css で 「Top へ戻る」 の書き方
h2 で右側に 「Top へ戻る」 を置きたいんですが、 以下のように書いてみると IE6 で背景画像が表示されないのと かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか．．． <style type="text/css"> .h2_container{ background: url(images/bg_h2.jpg); } .title{ width: 500px; float: left; } .top{ width: 100px; float: left; } .clear{ clear: both; } </style> <div id="h2_container"> <div class="title"><h2>内容のタイトル</h2></div> <div class="top"><a href="#">Top へ戻る</a></div> <div class="clear"></div> </div>
- ベストアンサー
- CSS
お礼
ありがとうございます。どちらでも表示的には問題ないので、逆にどうすべきだろうと迷っていました。