摘要 腾兴网为您分享:css div 实现图片从左向右自动横向排列，追书神器，中英翻译，优酷，武魂传说等软件知识，以及宝app，安卓串口，爱奇艺看图软件，爆枪英雄好号送，手机短信加密软件，阳光厨房，cad插件,玫瑰情人网，新华词典，实时备份，华图教育题库，网上宿迁，如果英语，x管理器，净之泉等软件it资讯，欢迎关注腾兴网。我们先来看看效果图片再一步步分析实例代码了。 首先我们来看这一块代码。 dl dt a href=pbum.php?uid=14 span/span img src=http://111cn.net/124461405936.jpg alt=image width=170 height=120 //a/dt dd class=activity...

我们先来看看效果图片再一步步分析实例代码了。

首先我们来看这一块代码。

公共相册

就这代码下面我们来看看css写法。

.gallery {

list-style: none;

margin: 0 0 0 10px;

padding: 0;

}

.gallery dl {

float:left;

overflow: hidden;

height: 180px;

margin-top: 20px;

margin-right: 0;

margin-bottom: 0;

margin-left: 0px;

display: block;

width: 230px;

padding: 10px;

}

.gallery dt {

padding: 0;

position: relative;

height: 130px;

text-align: center;

margin-bottom: 8px;

}

.activityphotoinfo {

background:url(images/albumnameback.png) no-repeat top left;

text-align:center;

height:42px;

width:185px;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

padding-top: 2px;

padding-right: 0;

padding-bottom: 0;

padding-left: 0;

}

.activityphotoinfo br{

position:relative;

}

.activityphotoinfo .text {

width: 100px;

float: left;

padding-left: 40px;

}

.activityphotoinfo   .text  p {

display: block;

line-height: 16px;

}

br.poll {

display: block;

height: 35px;

width: 40px;

top: 0px;

right: 0px;

cursor:pointer;

}

br.poll a {

display: block;

height: 35px;

width: 40px;

cursor:pointer;

left: 0px;

top: 0px;

right: 0px;

bottom: 0px;

}

.vote{

position:relative;

top:-20px;

left:60px;

display:block;

cursor:pointer;

height:38px;

width:42px;

margin:0 0 0 5px;

border:none;

background:none;

}

.gallery img {

background: #fff;

border: solid 1px #ccc;

padding: 4px;

}

.gallery span {

width: 77px;

height: 27px;

display: block;

position: absolute;

top: -12px;

left: 50px;

background: url(images/tape.png) no-repeat;

}

.gallery a {

text-decoration: none;

}

哈哈我们的css br 实例图片从左向右自动横向排列效果就出来了。原创转载注明www.111cn.net/cssbr/css.html

相关推荐