当前位置:Gxlcms > html代码 > 问下如何让两个浮动元素行高自动相等?_html/css_WEB-ITnose

问下如何让两个浮动元素行高自动相等?_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:16人阅读

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title> <div id="mainbox">
  2. <div id="header"><h2>W3School.com.cn</h2></div>
  3. <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>
  4. <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>


回复讨论(解决方案)

  1. @charset "utf-8";/* CSS Document */#header{ padding:0.5em;color:white;background-color:gray;clear:both;}#mainbox { width:1250px;
  2. margin:0 auto;
  3. border:5px;
  4. border:1px solid black;} #sidebar { float:left;
  5. padding:auto;
  6. width:445px;
  7. background:#F0F;
  8. height:170%;
  9. } #content { FLOAT: left;
  10. width:650px;
  11. PADDING:auto;
  12. background:#499;
  13. 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;这样垂直方向就不会被挤开。

人气教程排行