您的位置：首页 > Web前端 > CSS

div+css的使用，图片在div中置底，除空隙

2014-11-06 16:03 120 查看
<div style="position:relative;background-color: #9F6;height:500px;width:500px;border:1px solid red">

<div style="position:absolute; bottom:0;font-size:0px; ">

<img margin:0 auto; src="../Desktop/daolian.jpg" width="448" height="151" />

</div>

</div>

++++++++++++++++++++++++++++++++++++++++++

有些时候图片下面会有空隙


解决方法：

1,把图片的边距设为0,如:img{margin:0;padding:0;}
2,在你插图片的div样式里加上这句:font-size:0px;一般问题都出在这,在有的浏览器下默认是有字体大小的

+++++++++++++++++++++++++++++++++++++++++++++
图片在div中分散对齐（等间距）：

<!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>无标题文档</title>

<style type="text/css">

.justify{

width:400px;

border:solid 2px red;

background:#FFFFCC;

padding:10px;

text-align:justify;

text-justify :distribute-all-lines;

}

</style>

</head>

<body>

<div class="justify">

<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />

<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />

<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />

</div>

</body>

</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++

在div中使图片水平垂直居中的方法：（兼容多种浏览器）

<!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>无标题文档</title>

<style type="text/css">

#picbox{width:400px; height:300px; text-align:center; line-height:300px; border:1px #000 solid;}

#picbox span{

display:inline-block;

}

#picbox img{vertical-align:middle;}

</style>

</head>

<body>

<div id="picbox">

<span> </span><img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />

<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />

<img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />

</div>

</body>

</html>

看最新电影

www.palmdy.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航