ホームページ > 記事 > ウェブフロントエンド > 2 つの浮動要素の行の高さを自動的に等しくするにはどうすればよいですか? _html/css_WEB-ITnose
2 つの浮動要素の行の高さを自動的に等しくするにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:11:511403ブラウズ
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="main_style.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" /><link href="menu.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" /><title>无标题文档</title></head><body> <div id="mainbox"> <div id="header"><h1>W3School.com.cn</h1></div> <div id="sidebar"> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p> </div> <div id="content"><h2>Free Web Building Tutorials</h2> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p> </div> <div id="footer">Copyright 2008 by YingKe Investment. </div> </div> </body></html>
ディスカッションへの返信 (解決策)
@charset "utf-8";/* CSS Document */#header{ padding:0.5em;color:white;background-color:gray;clear:both;}#mainbox { width:1250px; margin:0 auto; border:5px; border:1px solid black;} #sidebar { float:left; padding:auto; width:445px; background:#F0F; height:170%; } #content { FLOAT: left; width:650px; PADDING:auto; background:#499; height:170%; }#footer{ padding:2.5em;color:white;background-color:gray;clear:both; text-align:center;} [img=http://my.csdn.net/my/album/detail/1163464][/img]
写真に示すように、ピンクと緑の行の高さが揃っていません。どうすれば自動的に揃えられますか?
[img=http://my.csdn.net/my/album/detail/1163464#][/img]
元のポスターを参照してください
http://www.blueidea.com/tech/ web/2006 /3210.asp
自分でゆっくり設定し、値を設定してから再度リセットします
#sidebar { float:left; width:#F0F; :540px; overflow:hidden; }
#content { FLOAT: left; width:650px; height:540px; overflow:hidden;内部 DIV はフローティング層に属しません。明らかに、左側と右側の部分の P タグは同じではないため、DIV は固定値に設定することをお勧めします。 overflow:hidden; 垂直方向が遮られないようにします。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。