一、引言

图文组合是页面中常见的布局，大致可以分为三类：上下排列，左右排列，以及图文混排。下面结合几个案例，进行解释。

二、案例

1.上下布局——单图单文

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test01</title><style>* {margin: 0;padding: 0;}.item {width: 50px;height: 60px;/* background-color: pink; */text-align: center;overflow: hidden;float: left;}.item img {width: 28px;height: 28px;/* img默认下方有个隔离边，修改成block会去掉 */display: block;margin: 5px auto;}.item p {font-size: 12px;font-weight: 200;/* background-color: gold; */}</style>
</head>
<body><div class="item"><img src="img/test01/1.png" alt=""><p>话费</p></div><div class="item"><img src="img/test01/2.png" alt=""><p>机票</p></div><div class="item"><img src="img/test01/3.png" alt=""><p>酒店</p></div>
</body>
</html>

2.左右布局——单图单文

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test02</title><style>* {margin: 0;padding: 0;}.item {width: 140px;height: 63px;/* background-color: pink; */border-bottom: 1px solid gray;}.item img {width: 36px;height: 36px;float: left;margin: 13px 2px;}.item p {width: 100px;height: 63px;line-height: 63px;float: left;}</style>
</head>
<body><div class="item"><img src="img/test02/1.jpg" alt=""><p>手机</p></div><div class="item"><img src="img/test02/2.jpg" alt=""><p>电视</p></div><div class="item"><img src="img/test02/3.jpg" alt=""><p>平板</p></div></body>
</html>

3.左右布局——单图多文

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.item {width: 238px;height: 70px;/* background-color: pink; */}.item img {width: 60px;height: 60px;float: left;margin: 5px;}.item div {width: 168px;height: 70px;/* background-color: gold; */float: left;}.item div .title {height: 32px;line-height: 16px;font-size: 14px;overflow: hidden;margin-top: 6px;}.item div .price {color: red;margin-top: 4px;font-size: 18px;}.item div .price span {font-size: 12px;}</style>
</head>
<body><div class="item"><img src="img/test03/1.webp" alt=""><div><p class="title">Apple苹果iPhone13Apple苹果iPhone13</p><p class="price"><span>￥</span>5888</p></div></div><div class="item"><img src="img/test03/2.webp" alt=""><div><p class="title">Apple苹果iPhone13Apple苹果iPhone13</p><p class="price"><span>￥</span>5888</p></div></div><div class="item"><img src="img/test03/3.webp" alt=""><div><p class="title">Apple苹果iPhone13Apple苹果iPhone13</p><p class="price"><span>￥</span>5888</p></div></div>
</body>
</html>

4.上下布局——单图多文

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test04</title><style>* {margin: 0;padding: 0;}.item {width: 190px;height: 266px;/* background-color: pink; */overflow: hidden;float: left;}.item .tu {width: 120px;height: 120px;/* background-color: gold; */margin: 0 auto;margin-top: 30px;background-size: 100% 100%;}.item .title {width: 170px;height: 40px;line-height: 20px;overflow: hidden;font-size: 14px;margin: 32px 10px 14px;}.item .price {width: 170px;margin: 0 10px;color: red;font-size: 18px;}.item .price span {font-size: 14px;}</style>
</head>
<body><div class="item"><div class="tu" style="background-image: url(img/test04/1.webp)"></div><p class="title">Apple苹果iPhone13Apple苹果iPhone13</p><p class="price"><span>￥</span>5888</p></div><div class="item"><div class="tu" style="background-image: url(img/test04/2.webp)"></div><p class="title">Apple苹果iPhone13Apple苹果iPhone13</p><p class="price"><span>￥</span>5888</p></div><div class="item"><div class="tu"  style="background-image: url(img/test04/3.webp)"></div><p class="title">Apple苹果iPhone13Apple苹果iPhone13</p><p class="price"><span>￥</span>5888</p></div>
</body>
</html>

注意：
图片img标签会被当做文字处理，默认基线对齐，会出现下方间隙，解决方案：把img的display属性改为block，然后对其进行外边距设置（图片可从网上自行下载）
左右布局会使用浮动，上下布局有时候可以不用浮动。

Html+css之图文组合相关推荐

常见图文组合以及溢出隐藏
先给大家介绍几种常见的居中方式:文本垂直居中使用line-height=heght:可以实现. 写在父级,子击中行元素,行块元素文本水平居中text-align:center: 块元素相对于在父级水平 ...
css控制图文混排、图文自适应容器显示的效果
闲来无聊,写了一个css控制图文混排.图文自适应容器显示的效果. 下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果. 留存参考: <!DOCTYPE html /&g ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
css 平行四边形梯形组合_微课|人教版五年级数学上册6.4组合图形的面积（P99）...
|点击题目下方蓝字一键关注小学生知识库| 视频微课在公众号菜单"爱学小学",打开小程序 "爱学中小学",免费观看人教版数学教学视频. 您也可以在这里搜一搜, ...
html怎么制作图文混排页面,CSS 网页图文混排的10个技巧
1. 首行缩进你知道的,从小学,老师就教我们,段落的开头应该空两格.而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了.当然,你可以用来代替一个空格,但这不是理 ...
CSS选择器学习小结 (css基本选择器 + 组合选择器 + :nth-child()高级选择器)
目录 css基本选择器: 通用选择器: 格式: 元素选择器: 格式: 样例: id选择器: 格式: class类选择器: 格式: 分组选择器: 格式: 基本选择器的权重: css组合选择器: 后代选择 ...
前端代码：html、css（图文混排）文字环绕 - 案例篇
前端代码(含图文混排)文字环绕.demo代码.效果图具体效果,请拷贝源码至本地运行查看.(不再赘述!) 效果图 · 截图: 案例代码 · 如下: <!DOCTYPE html> < ...
图文样式css样式,初学解惑：常用CSS样式图文设置教程
注:在论坛中记得有人问过,做了网页之后字体特别大?如何控制网页中的字体呢?答案是用CSS来控制,今天给大家编写这个教程主要是面对初学者的! 一个有链接的文本,鼠标ON.OVER不同状态下的响应是不同的 ...
css：图文效果（上面图片下面文字）
效果代码 <div class="content-account"><div><i></i><p>学习计划</p ...

Html+css之图文组合

图文组合

一、引言

二、案例

1.上下布局——单图单文

2.左右布局——单图单文

3.左右布局——单图多文

4.上下布局——单图多文

Html+css之图文组合相关推荐

最新文章

热门文章