Home > Article > Web Front-end > How to make the row height of two floating elements automatically equal? _html/css_WEB-ITnose
How to make the row height of two floating elements automatically equal? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:511403browse
<!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>
Reply to discussion (solution)
@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]
As shown in the picture, the pink and green row heights are not aligned. How can they be automatically aligned?
[img=http://my.csdn.net/my/album/detail/1163464#][/img]
Please refer to the original poster
http:/ /www.blueidea.com/tech/web/2006/3210.asp
Set it up slowly by yourself, set a value and adjust it, then reset it again
#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; }
Try changing it to this, because they are all internal DIVs and do not belong to the floating layer. The DIVs will become higher as the data increases. Obviously, you The number of P tags in the left and right parts is different. It is recommended to set it to a fixed value and then overflow:hidden; so that it will not be squeezed out in the vertical direction.