• 所有问题

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

    如题所述

    举报该问题
    推荐答案   2011-10-12
    <!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控制例子
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2011-10-12
    你们不要误人子弟了 人家说一个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>
    第2个回答  2011-10-12
    用什么元素包含图片不重要, 底部排列对齐的话, 可以用定位,
    父层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>
    第3个回答  2011-10-12
    不加样式控制，默认就是底部排列对齐的；
    如果不是底部对齐，可以加一个样式控制
    img{ vertical-align:bottom;}
    第4个回答  2011-10-13
    什么都不需要用。直接把图片放在div里默认就是底部对齐
    12
    相似回答
    大家正在搜
    相关问题
    我用CSS+DIV布局我想让四个图片上面两个，下面两个排列该...
    怎么设置css，把放在一个div中的图片横着排列
    CSS 在一个div里放置了两幅图片，希望这两幅底部对齐，并...
    图片上面有4个的标题字 用CSS+DIV怎么和下面的4张图片...
    如何让图片在DIV中底部对齐
    怎么设置css,把放在一个div中的图片横着排列
    一个div里面有多张图片，用js怎么实现使图片在div里面的...
    html 网页div中4张图片分别左右对齐间距一样