小女子雪域跪求一解决方案（不同大小图片的排列布局）-HTML教程-爱易网页

小女子雪域跪求一解决方案（不同大小图片的排列布局）

日期：2014-05-17　浏览次数：20649 次

小女子雪地跪求一解决方案（不同大小图片的排列布局）
先附上链接荣誉资质，是这儿出了问题
各位客官打开链接即可见两条信息，里边各放二十多个图片，现在要把这两个合在一个页面上，由于图片高度和宽度不一到致，要是放到一起，有的图片会变弄，现在求个方案，把它们放到一起，现在两个页面的样式是不一样的，怎么才能让页面自己根据图片大小，选择合适的样式呢？
不知道我说清了没有，忘各位客官可怜，小女子先行谢过了~

------解决方案--------------------
顶一下吧，别让沉底了！希望有人能帮着解决！
------解决方案--------------------
这位官人我不是很明白你的意思给给我发个站内信把问题描述清楚点？？？？
------解决方案--------------------
http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html
不知道这个是不是需要的其实我没看懂你的意图- -.
------解决方案--------------------
层统一为正方形.然后等比例缩放图片,(图片最长边=层宽)
------解决方案--------------------
我也没看懂，可能是我们的理解能力太差。
------解决方案--------------------
一横一竖
为什么不能放一个页面上呢？

难道你一个页面上横竖不能共存吗
------解决方案--------------------
我就只有这样了，用两个块来拼成一个，因为照片大小不样，所以第二个块的padding要少很多。

HTML code


<!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>
body{padding:0; margin:0 auto; text-align:center;}
.title{font-weight:bolder; font-size:15px;}
.info,.info_2{width:751px; height:auto; margin:0 auto;}
.info ul,.info_2 ul{padding:0; margin:0;}
.info li{float:left; list-style:none; padding:22px; border:1px solid #ccc; border-right:none; border-bottom:none;}
.info_2 li{float:left; list-style:none; padding:8px; border:1px solid #ccc; border-right:none; border-bottom:none;}
#right{border-right:1px solid #ccc;}
#bottom{border-bottom:1px solid #ccc;}
#r_b{border:1px solid #ccc;}
</style>
</head>

<body>
<center>
<div style="width:737px; height:auto;">
<div class="title">ABCD</div>
<div class="info">
<ul>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt=""/></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li id="right"><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li ><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li id="right"><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li id="right"><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a" src="" width="140" height="200" alt="" /></Li>
<Li><img name="a

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

小女子雪域跪求一解决方案（不同大小图片的排列布局）

相关资料更多>

推荐阅读更多>