php图片横排,css div 实现图片从左向右自动横向排列

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

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

     

公共相册 

就这代码下面我们来看看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 div{

position:relative;

}

.activityphotoinfo .text {

width: 100px;

float: left;

padding-left: 40px;

}

.activityphotoinfo   .text  p {

display: block;

line-height: 16px;

}

div.poll {

display: block;

height: 35px;

width: 40px;

top: 0px;

right: 0px;

cursor:pointer;

}

div.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 div 实例图片从左向右自动横向排列效果就出来了。原创转载注明www.111cn.net/cssdiv/css.html