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

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

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

（1）

或者这种的时候

（2）

类似于第一种

html:

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

</li>

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

</li>

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

</li>

</ul>

样式：

公共的

.cata-bann .list li p {

padding: 0 0 0 80px;
line-height: 68px;
font-size: 16px;
margin: 0 0 0 0;

}

单独的：

cata-bann .list li .ico1 {

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

}

第二种和第一种差不多：

html:

<h2>

WORKING TIME

</h2>

<p>

8.00 AM - 10.00 PM

</p>

</div>

<h2>

FREE Ground Shipping

</h2>

<p>

to Continental US

</p>

</div>

<h2>

1 Year Warranty

</h2>

<p>

one year manufacturer warranty

</p>

</div>

<h2>

FREE Tech Support

</h2>

<p>

for every product we sell

</p>

</div>

</div>(有点长)

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

.header-static .header-time {

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

}

.header-static h2 {

color: #2e3030;

}

.header-static p {

color: #848383;

}

.header-static p {

text-transform: capitalize;
font-size: 14px;
margin: 0;
font-family: 'titilliumweb';

}

上下排列的:

统一的：

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

background-position: top center;

}

.cata-bann .list li p {

padding: 25% 0 0 0;
text-align: center;

font-size: 16px;
line-height: 68px;

}

单独的背景：

.cata-bann .list li .ico1 {

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

}

左图右文或者上图下文的排列相关推荐

iOS 设置按钮上图下文的方式
UIButton *tabBtn = [ UIButton buttonWithType : UIButtonTypeCustom]; tabBtn. frame = CGRectM ...
《征服老板：零基础做出高逼格PPT》笔记（二）
第 3 讲 PPT 设计思维轻松掌握(上) 3.1 这样思考,素材搜索能力百倍提升(16 分钟) 课程核心:打破你的思维局限素材网站推荐: ① PIXABAY ② BING 图片(有筛选器功能,有商用 ...
怎么把页面按比例缩小_做PPT多图排版千万别套模板了，按这28种版式来，绝对靠谱！...
编按: 各种类型的PPT经常会用到图片,这些图片到底如何排版才更出色呢?今天给大家分享一篇PPT图片排版手册,主要介绍了多张图常见的排版方式,希望能帮助到您! 嗨,大家好,我是P小白. 一张图排版很容 ...
LeetCode 1727. 重新排列后的最大子矩阵（前缀和+排序）
文章目录 1. 题目 2. 解题 1. 题目给你一个二进制矩阵 matrix ,它的大小为 m x n ,你可以将 matrix 中的列按任意顺序重新排列. 请你返回最优方案下将 matrix ...
LeetCode 5655 重新排列后的最大子矩阵
LeetCode 5655 重新排列后的最大子矩阵题目链接给你一个二进制矩阵 matrix ,它的大小为 m x n ,你可以将 matrix 中的列按任意顺序重新排列. 请你返回最优方案下将 ...
5655. 重新排列后的最大子矩阵
5655. 重新排列后的最大子矩阵难度中等18 给你一个二进制矩阵 matrix ,它的大小为 m x n ,你可以将 matrix 中的列按任意顺序重新排列. 请你返回最优方案下将 matri ...
PPT文字很多的排版，PPT图片很多的排版，PPT图文排版
文章目录专业设计师是如何把一个word变成PPT的? **▌搭建"骨架",填充"血肉"** ▌**内页的排版** **▌对页面的可视化处理** PPT文字巨多 ...
美团-移动端UI一致性解决方案
点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低 ...
移动端UI一致性解决方案
外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低整体视觉改版带来的研发成本.外卖技术团队通过在实践中不断总结经验,开发 ...

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

左图右文或者上图下文的排列相关推荐

最新文章

热门文章