Product details page --- excellent purchase product details area iteminfo_wrap

Product details area is designated as a whole big box: iteminfo_wrap
No. 1 Box named: sku_name
No. 2 Box named: news
No. 3 box named: summary

step1: 3 boxes frame structures, and the completion of the first two boxes of the content and style

<div class="iteminfo_wrap fr">

    <div class="sku_name">
        Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机        
    </div>

    <div class="news">  
        推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返      
    </div>

    <div class="summary">           
    </div>

</div>

.iteminfo_wrap {
    /*这个盒子不给高度*/
    width: 718px;
}
.sku_name {
    height: 30px;/*高度剩余法： 省去添加间距的麻烦*/
    font-size: 16px;
    font-weight: 700;
}
.news {
    height: 32px;/*高度剩余法： 省去添加间距的麻烦*/
    color: #e12228;
}

step2: Analysis summary box, there are many dl (dl = dt + dd) configuration, each row occupying dl
(1) Now write first a summary of dl (summary_price)

<div class="summary">
    <dl class="summary_price">
        <dt>价    格</dt>
        <dd>
            <i class="price">￥5299.00 </i>
            <a href="#">降价通知</a> 
            <div class="remark">累计评价612188</div>
        </dd>
    </dl>
</div>

.summary_price {
    padding: 10px 0;
    background-color: #fee9eb;
}
.summary dt,
.summary dd {
    float: left;
    /*1 父亲summary_price(也就是.summary dl)没有给高 
    孩子.summary dt和.summary dd浮动后 要为父亲清除浮动带来的影响*/
    line-height: 36px;
    /*下面的price将字号调成24px之后把盒子给撑大了，保证dt依然居中对齐要让行高等于高。
    但不知道行高具体多大，所以要在检查元素里面看。注意： 行高不包括内外边距和边框*/
}
.summary dl {
    overflow: hidden;/*2 清除浮动带来的影响   这样就不用在summary_price后面加clearfix*/
}
.summary dt {/*这样可以保证所以的dt左边全部对齐*/
    width: 60px;
    padding-left: 10px;
}
.price {
    font-size: 24px;
    color: #e12228;
}
.summary_price a {
    color: #c81623;
}
.remark {
    /*float: right; 
    “累计评价612188”在dd中，而dd盒子没有给宽
    就算添加浮动，“累计评价612188”也无法贴到dl的最右边
    所以利用定位比较好*/
    position: absolute;/*定位是以带有定位的父亲为准
    所以同时要为summar_price(dl有宽度718：继承了父亲的)添加相对定位*/
    top: 20px;
    right: 10px;
}

(2) written summary inside the second dl (summary_promotion) which is a parallel relationship to summary_price

<dl class="summary_promotion">
    <dt>促销</dt>
    <dd><!--注意到换行的问题，这个dd需要给宽度-->
        <em>加购价</em>
        满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，
        即可在购物车换购热销商品  详情 》
    </dd>
</dl>

.summary_promotion {
    padding-bottom: 10px;
    background-color: #fee9eb;
}
.summary_promotion dd{
    width: 450px;/*dd添加宽度之后里面文字就会自动换行*/
    line-height: 36px;/*可以通过调整dd的行高来让dt中的文字(促销)和dd第一行对齐*/
}
.summary_promotion em {
    display: inline-block;
    width: 40px;
    height: 22px;
    background-color: #c81623;
    text-align: center;
    line-height: 22px;
    color: #fff;
}