一个div里放了4张图片，怎样设置div或者css让那几张图片这个div里的底部排列对齐？是要用ul、li？ 5

 我来答

6个回答

#合辑# 面试问优缺点怎么回答最加分？

百度网友2fa8b9d
2011-10-12 · TA获得超过810个赞

知道小有建树答主

回答量：559

采纳率：0%

帮助的人：631万

我也去答题访问个人页

关注

展开全部

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

<style>
html,body,div,p,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe,table,th,td {
margin:0;
padding:0;
}

#zb {
width:693px;
height:90px;
margin-top:6px;
border:1px solid #CCC;
}
#zb ul {
list-style:none;
padding-top:15px;
}
#zb ul li {
display:inline;
padding:4px;
}
</style>

</head>

<body>
<div id="zb">
<ul>
<li><img src="http://www.e0757.cn/lwf_images/yygyyy.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg1.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg2.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg3.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg4.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg5.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg6.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg7.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg8.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg9.jpg"></li>
<li><img src="http://www.e0757.cn/upload/uploadFiles/sg10.jpg"></li>

</ul>
</div>
</body>
</html>

这是一个CSS控制例子

已赞过 已踩过<

评论收起

无锡起飞尔网络科技

广告2024-11-30

照片换背景的修图软件-图片编辑助手海量背景库及丰富证件照底色可选。支持同时选择多个图片处理背景。照片换背景的修图软件，提供一站式图片处理，小白也能进阶图片处理大师。

tpcl.wxqerf.cn

百度网友b389898
2011-10-12 · TA获得超过125个赞

知道答主

回答量：67

采纳率：0%

帮助的人：46.4万

我也去答题访问个人页

关注

展开全部

你们不要误人子弟了人家说一个div中，放四个图片，用ul，还是li。
其实不是ul，也不是li。用span。span默认就是以行显示。你可以试试。用span不用设置任何的css。如果图片大小不一样，只需要设置图片本身的width和height。如果用css有很多方法达到你想要的效果，但是用标签，最有效率的就是span。span和div的区别在于，span是行，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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div>
<span>
<img src="image-4449_4B325B0E.jpg" width="300" height="325" />
<img src="image-4449_4B325B0E.jpg" width="300" height="325" />
<img src="image-4449_4B325B0E.jpg" width="300" height="325" />
<img src="image-4449_4B325B0E.jpg" width="300" height="325" />
</span>
</div>
</body>
</html>

已赞过 已踩过<

评论收起

周鲲鹏
2011-10-12 · TA获得超过269个赞

知道小有建树答主

回答量：255

采纳率：0%

帮助的人：228万

我也去答题访问个人页

关注

展开全部

用什么元素包含图片不重要, 底部排列对齐的话, 可以用定位,
父层position:relative; 子层position:absolute;
然后对子层的img元素进行排列.
DEMO如下:

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.warp {position:relative;width:950px;height:500px;overflow:hidden;background:#999999;}
.warp ul {position:absolute;width:1000px;bottom:0;left:0; background:#CCCCCC;}
.warp ul li{float:left;margin-right:50px;}
</style>
</head>
<body>
<div class="warp">
<ul>
<li><img src="http://m2.biz.itc.cn/pic/new/n/53/17/Img2971753_n.jpg" width="200" /></li>
<li><img src="http://m2.biz.itc.cn/pic/new/n/53/17/Img2971753_n.jpg" width="200" /></li>
<li><img src="http://m2.biz.itc.cn/pic/new/n/53/17/Img2971753_n.jpg" width="200" /></li>
<li><img src="http://m2.biz.itc.cn/pic/new/n/53/17/Img2971753_n.jpg" width="200" /></li>
</ul>
</div>
</body>
</html>