HTML图片/文字并排排列代码怎么写【左图右文】

在做页面的时候,有很多的排版方式,如果用代码将其一一实现,那就需要点耐心了,今天我们使用代码来做个图文排版的页面,左侧是图片区,右侧是文字解释区。

操作方法

  • 01

    首先先准备图片素材和文字语言,如图;在body中的建设就这

  • 02

    添加CSS样式修饰,最外面的大框添加宽度居中;下面的图片和文字设置

  • 03

    现在的图文是这样排版,如图

  • 04

    想要将图文左右排版,无非是定位或者浮动,对图片块和文字块都添加了浮动效果后,

  • 05

    如图,添加浮动后,文字部分因为文字太长超出了他所用那的范围,所以被挤到到了下行的右侧,如图

  • 06

    这时候,将文字区域设置下宽度,不让他超过最大范围就行了,如图;设置宽度为450px

  • 07

    然后再预览效果图,就完美解决了。

(0)

相关推荐

  • 广告代码怎么写 如何在网站添加图片广告代码

    有了自己的网站,网站有了流量,就可以销售产品和服务在互联网赚钱. 有很多网站本身并不销售产品和服务,也许只是一个个人博客,也许是一个信息门户站,这样的网站要盈利,就要为其他客户做广告, 而网站最常见最 ...

  • 图片插入Word文档后发现图片文字重叠在一起的原因和解决方法

    图片插入Word之后,发现图片文字重叠到一起了,这应该是由于文绕图是设定成与文字排列而造成的,遇到这种情况该怎么办呢? 其实这不是Word的错,图片文字重叠到一起,这不是也不是Word Bug,是段落 ...

  • 图片插入Word文档后发现图片文字重叠在一起怎么办?

    图片插入Word之后,发现图片文字重叠到一起了,这应该是由于文绕图是设定成与文字排列而造成的,遇到这种情况该怎么办呢? 其实这不是Word的错,图片文字重叠到一起,这不是也不是Word Bug,是段落 ...

  • 图片文字转换成word教程

    步骤一:在电脑中下载安装捷速图片文字转换成word软件,安装只需三步,用户可轻松完成。 步骤二:打开已经下载好的软件,直接进入到软件的操作界面,左上角排列着软件的操作按钮,首先点击“读取”按钮,读取需 ...

  • 图片文字识别软件哪个好?六款好用的OCR文字识别软件推荐

    有哪些OCR文字识别软件可以识别图片上的文字?以往如果需要录入一份纸质的信息或图片上的信息,只能对着电脑枯燥的敲键盘,而有了OCR文字识别软件之后,图片上的文字就可以很快识别出来.当然这仅对于字体清晰 ...

  • 手机微博软件上图片文字如何发表

    有的小伙伴在手机上使用微博软件时,想要发表图片文字,但是却不知道如何发表,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,点击并打开微博软件.2. 第二步,来到微博软件主页面后,点击右上角的&q ...

  • 图片文字转换成word文档最新教程

    大家都知道,图片上的文字不能进行复制,如果用户需要将图片中的文字变成可编辑的Word文档,那就只能依靠手打或文字识别工具了.手打的方法不仅浪费时间,而且麻烦,所以这里小编要给大家介绍一款文字识别工具, ...

  • 如何将图片文字快速提取出来(怎么才能把图片上的文字提取出来)

    很多小伙伴是不是都有过这样的经历:领导一连发来几张密密麻麻都是文字的截图,让你抽空整理出一份Word文档给他.就在我因此一筹莫展之时,同事向我伸出了援手,帮助我度过难关,顺利准时下班.今天就让我来将这 ...

  • 有没有识别图片文字的软件(如何识别图片中的文字)

    相信大家根据自己的生活经验也能知道,这一类软件在我们的生活中,其实是广泛地被需要的.1.公司的纸质文件2.百度的付费文档3.书本中优美的篇章4.某些软件或页面内无法复制的小贴士(例如小红书等)只要有了 ...