Heim > Artikel > Web-Frontend > 问下如何让两个浮动元素行高自动相等？_html/css_WEB-ITnose
问下如何让两个浮动元素行高自动相等？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:511401Durchsuche
<!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; padding:auto; width:445px; background:#F0F; height:540px; overflow:hidden; }
#content { FLOAT: left; width:650px; PADDING:auto; background:#499; height:540px;overflow:hidden; }
改成这样试试一下，因为都是内部的DIV，不属于浮动层，DIV会随着数据的增加变高，很明显，你左右2部分的P标签不一样多，建议设置成固定值，然后overflow:hidden;这样垂直方向就不会被挤开。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html5里面如何实现iframe的功能呢。_html/css_WEB-ITnoseNächster Artikel：新手求指导_html/css_WEB-ITnose