商品展示--左边图片 右边描述布局（一）

 

 

 

 

HTML部分：

<ul>
  <li class="clearfix">
    <div class="goods-img"><img src="goodimg.png"></div>

    <div class="goods-info"><h4>商品名称这只是一个例子</h4>
      <div class="sub-title">【预售商品】购买后15日内发货！</div>
      <div class="mixed-box">
        <div class="sale-price">￥599.00</div>
        <div class="btn-details"><a href="javascript:;">了解详情</a></div>
      </div>
    </div>
  </li>
</ul>

　　

CSS：

ol, ul {
    list-style: none;
}

.wrap .goods-list ul li .goods-img {
    margin: 0.27rem 0.4rem;
    float: left;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: block;
}

.clearfix:after {
  clear: both;
}

.wrap .goods-list ul li:not(:last-child) .goods-info {
    border-bottom: 0.01rem solid #e8e8e8;
}

.wrap .goods-list ul li .goods-info {
    margin: 0 0.4rem 0 3.2rem;
    padding-top: 0.27rem;
    height: 2.93rem;
}
.wrap .goods-list ul li .goods-info .sub-title {
    margin-top: 0.29rem;
    font-size: 0.32rem;
    color: #b9b9b9;
    height: 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wrap .goods-list ul li .goods-info .mixed-box {
    margin-top: 0.61rem;
    position: relative;
}

.wrap .goods-list ul li .goods-info .mixed-box .sale-price {
    font-size: 0.4rem;
    color: #fe730c;
}

.wrap .goods-list ul li .goods-info .mixed-box .btn-details {
    position: absolute;
    top: -0.2rem;
    right: 0;
}

.wrap .goods-list ul li .goods-info .mixed-box .btn-details a {
    background-color: #fa7034;
    border-radius: 0.08rem;
    text-decoration: none;
    width: 2.0rem;
    height: 0.8rem;
    text-align: center;
    font-size: 0.35rem;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}