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

WBOY
发布: 2016-06-24 12:11:51
原创
1430 人浏览过

<!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;这样垂直方向就不会被挤开。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板