css 解决方案-3px bug 和左浮动右侧顶部对齐

最新推荐文章于 2022-03-06 19:12:12 发布

编程之上

最新推荐文章于 2022-03-06 19:12:12 发布

阅读量2k

点赞数

分类专栏： css&css3

本文链接：https://blog.csdn.net/ruizhengyun/article/details/8681181

版权

css&css3 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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" />  
<title>3px bug 和左浮动右侧顶部对齐</title>  
<style type="text/css">  
*{  
    margin:0; padding:0;  
    }  
    body{  
    font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px;  
    }  
    a,img{  
    border:0 none;  
}  
.wrap{  
    width:1000px; text-align:center;  
    margin:30px auto; padding:10px;  
    color:#fff; border:1px dashed #f00;  
}  
.photo{  
    width:150px; height:150px;  
    background:#393; float:left;  
    _margin-right:-3px;  
    line-height:30px;  
	overflow:hidden;
}  
/*
	display:table-cell;		//ie8+ ff
	*zoom:1; *display:inline-block; //ie7- ，两者选其一
	width:2000px;	//ie8+ ff 长度不限制
	*width:auto;	//ie7- 兼容
*/
.contain{  
    display:table-cell; *zoom:1; /**display:inline-block; */
	width:2000px; *width:auto; padding-left:10px;
    background:#09F;  
    text-align:left;  
    line-height:30px;     
}  
</style>  
</head>  
  
<body>  
<script type="text/javascript">  
    var tit=document.title;  
    alert(tit);  
</script>  
<div class="wrap">  
    <div class="photo">  
        <a href="http://www.ruizhengyun.cn"><img src="https://img-my.csdn.net/uploads/201303/16/1363416871_1697.jpg" alt="最珍贵年轻的心" width="150" height="150" /></a>  
    </div>  
    <div class="contain">  
        不得不记住的那句话：<br/>  
        青春的土壤中<br/>  
        只有记忆是潮湿的<br/>  
        我们不是植物<br/>  
        不能在这块土地上生生不息<br/>  
        当我们回眸青春<br/>  
        仿佛有一种说不出的痛<br/>  
        很多人问我<br/>  
        青春的诀别是否意味着年迈的将近<br/>  
        其实<br/>  
        青春，它一直都在继续……  
    </div>  
</div>  
</body>  
</html>