ホームページ > ウェブフロントエンド > htmlチュートリアル > 実際の結果が望ましい結果を達成できないのはなぜですか?これは主に li タグのフローティング効果の影響を受けます。スタイルで clear 属性を使用しても問題は解決できません。 _html/css_WEB-ITnose

実際の結果が望ましい結果を達成できないのはなぜですか?これは主に li タグのフローティング効果の影響を受けます。スタイルで clear 属性を使用しても問題は解決できません。 _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:14:12
オリジナル
2153 人が閲覧しました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html ; charset=utf-8"/><style>body{font-family:"Helvetica","Arial",sans-serif;color:#333;background-color:#ccc;margin:1em 10%;height:550px;width:1024px;}h1{color:#333;background-color:transparent;}a{color:#c60;background-color:transparent;font-weight:bold;text-decoration:none;}ul{float:left;padding:0;}li{float:left;padding:1em;list-style:none;clear:right;}img{clear:both;}</style>  <title> Image Gallery </title> </head>  <body>  <h1>Snapshots</h1>  <ul>		<li>		<a href="images/1.jpg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>		</li>		<li>		<a href="images/2.jpg" onclick="showPic(this); return false;" title=" A cup of black coffee"> Coffee</a>		</li>		<li>		<a href="images/3.jpg" onclick="showPic(this); return false;"  title="A red ,red rose ">Rose</a>		</li>		<li>		<a href="images/4.jpg" onclick="showPic(this); return false;" title=" The famous clock"> Big Ben</a>		</li>	</ul>		<img src="images/5.jpg" alt="my image ga	llery" id="placeholder"></img>		<p  id="description">Choose an image.</p> </body></html>
ログイン後にコピー

望ましい効果:
実際の効果:


ディスカッションへの返信 (解決策)

" title=" 有名な時計" /5.jpg" alt="私の画像ギャラリー" id="placeholder"/>

画像を選択してください。





原理を説明できますか? ul または li タグのスタイルに「clear: right」を追加すると機能しないのはなぜですか?

まず ul の float: left を削除します
次に、li 要素は浮動要素であり、浮動要素はドキュメント フローなので、この UL は存在しません 高さ

追加:

ul自适应高度ul{     zoom:/*IE*/}ul:after{     content:' ';     display:block;     clear:both;     height:0;}
ログイン後にコピー

以上です




1. まず第一に、フローティングについて話しましょう
フローティング要素にはデフォルトで幅がないため、コンテンツに依存する必要があります幅をサポートするか、手動で幅を追加するには、

    は幅を追加せずに浮動するため、すべての
  • の幅になります。 通常の状況では、 & lt; li & lt; a & gt; の場合は、 overflow: hidden を追加します。 Clear T Clear: Both の意味は、現在の要素に対する浮動要素の影響をクリアすることです。
    つまり、Clear: 両方を「現在の要素」 (通常は非浮動要素) に追加する必要があります

    3. 最後に、レイアウト

    通常、レイアウトは全体から、レイアウトは全体からローカルになります。
    つまり、最初に大きなフレームワークをレイアウトしてから、さまざまな小さなモジュールを整理する必要があります。例:

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>layout</title></head><body>    <div class="header">        <div class="logo"></div>        <div class="nav"></div>    </div>    <div class="main">        <div class="main-left"></div>        <div class="main-right"></div>    </div>    <div class="footer">            </div>    </body></html>
    ログイン後にコピー



    マスターの方々のご指導のおかげで、小さな浮動属性の注意点がとても奥深いようです! ! !ただ、気になるのは、私が見たソースコードではfloatを処理しなくても効果が得られるということです。この本はおそらく2007年に出版されたものだと思いますが、当時のブラウザの処理は違うのでしょうか?

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート