左图右文或者上图下文的排列

以前一般有这种排列的时候是用一个大的div包裹img标签和cite标签，不过调起响应式来有些麻烦。

后来看到了一种新的方法，类似于做这种

（1）

或者这种的时候

（2）

类似于第一种

html:

                                        <ul class="row list cata-1">

                                          <li class="col-md-4 col-sm-4 col-xs-4 xs_cate">

                                                <p class="ico1">Secure all the time</p>

                                            </li>

                                            <li class="col-md-4 col-sm-4 col-xs-4 xs_cate">

                                                <p class="ico2">Instant support</p>

                                            </li>

                                            <li class="col-md-4 col-sm-4 col-xs-4 xs_cate">

                                                <p class="ico3">One-Year Warranty</p>

                                            </li>

                                        </ul>

样式：

公共的

.cata-bann .list li p  {

1. padding: 0 0 0 80px;
2. line-height: 68px;
3. font-size: 16px;
4. margin: 0 0 0 0;

}

单独的：

cata-bann .list li .ico1  {

1. background: url(../images/Product/secure_alltime.png) no-repeat 0 0;

}

第二种和第一种差不多：

html:

<div class="row">

            <div class="f-col col-sm-6 col-md-3 col-sms-6 col-smb-12">

                <div class="header-time">

                    <h2>

                        WORKING TIME

                    </h2>

                    <p>

                        8.00 AM - 10.00 PM

                    </p>

                </div>

            </div>

            <div class="f-col col-sm-6 col-md-3 col-sms-6 col-smb-12">

                <div class="header-shipping">

                    <h2>

                        FREE Ground Shipping

                    </h2>

                    <p>

                        to Continental US

                    </p>

                </div>

            </div>

            <div class="f-col col-sm-6 col-md-3 col-sms-6 col-smb-12">

                <div class="header-money">

                    <h2>

                        1 Year Warranty

                    </h2>

                    <p>

                        one year manufacturer warranty

                    </p>

                </div>

            </div>

            <div class="f-col col-sm-6 col-md-3 col-sms-6 col-smb-12">

                <div class="header-phone">

                    <h2>

                        FREE  Tech Support

                    </h2>

                    <p>

                        for every product we sell

                    </p>

                </div>

            </div>

        </div>(有点长)

-------------css-----------------

.header-static .header-time  {

1. padding: 6px 0 5px 64px;
2. background: url("../images/footer-time.png") no-repeat left center;

}

.header-static h2  {

1. color: #2e3030;

}

.header-static p  {

1. color: #848383;

}

.header-static p  {

1. text-transform: capitalize;
2. font-size: 14px;
3. margin: 0;
4. font-family: 'titilliumweb';

}

上下排列的:

统一的：

.cata-bann .list li .ico1,.cata-bann .list li .ico2, .cata-bann .list li .ico3  {

1. background-position: top center;

}

.cata-bann .list li p {

1. padding: 25% 0 0 0;
2. text-align: center;

1. font-size: 16px;
2. line-height: 68px;

}

单独的背景：

.cata-bann .list li .ico1  {

1. background: url(../images/Product/secure_alltime.png) no-repeat 0 0;

}