图片横排列

标签：

<style>

.aside{
    position:relative;
    height:400px;
}
.aside ul li{
    position: absolute;

}
/*产品价格区*/
.show1{
    margin-top:20px;
}
/*.allshow{    
    border: 1px solid #fff;
}*/
.allshow  ol li{
width: 182px;//固定宽度不会乱  错误情况paddin:45px 52px 40px 15px使下面短的列表无法对齐
padding-top: 45px;
padding-left: 15px;
float:left;
border: 1px solid #e5e5e5;
}
.allshow ol li p{
    text-align: center;
    color:#ff7300;
    font-family: "微软雅黑";
    height:20px;
    line-height:20px;
}

</style>

  <div class="allshow fl">
            <ol>
               <li>
                 <a href="#" ><img src="images/1_14.png"></a>
                 <div  class="item">
                 <p><a herf="#">HTC新渴望8系列</a></p>
                 <p>
                   <i>$</i>
                   123元
                </p>
                </div>
                 </li>
              <li>
                 <a href="#" ><img src="images/1_14.png"></a>
               <div class="item">
                 <p><a herf="#">HTC新渴望8系列</a></p>
                 <p>
                   <i>$</i>
                   123元
                </p>
                </div>
                 </li>
               <li>
                 <a href="#" ><img src="images/1_14.png"></a>
                 <div class="item">
                 <p><a herf="#">HTC新渴望8系列</a></p>
                 <p>
                   <i>$</i>
                   123元
                </p>
                </div>
              </li>
              <li>
                 <a href="#" ><img src="images/1_14.png"></a>
                 <div class="item">
                 <p><a herf="#">HTC新渴望8系列</a></p>
                 <p>
                   <i>$</i>
                   123元
                </p>
                </div>
              </li>
             </ol>
             <div class="clearfix"></div>
           <ol>
             <li class="show-button">
               <a class="fl" href="#"><img src="images/1_31.png"></a>
               <div class="allitem">
                 <p>NFC技术一碰轻松
配对！接触屏幕</p>
                 <p>
                   <i>$</i>
                   123元
                 </p>
               </div>
             </li>
           </ol>

图片横排列

标签：

原文地址：http://www.cnblogs.com/miss-123/p/5401125.html