求帮助,图片和文本要在一行显示_html/css_WEB-ITnose

宜家博客
宜家博客
宜家博客
48012
文章
0
评论
2020年7月1日14:22:31 评论 2 1407字阅读4分41秒

html 文本互排

想要实现下面的样式,左边是图片,右边是文本。

我自己做的第二行文本比第一行向前突出一些,文本没有对齐。不知道怎么实现文本对齐。

回复讨论(解决方案)

图片设置背景,append-left= 前面宽度

你用什么方式实现的,设置图片block,然后使用float吗?

也可以像ul那样,用background-image+padding-left实现

css代码:

img.pic{                float:left;                margin-right:10px;                margin-bottom:5px;                vertical-align:top;            }            p.context{                                margin:0px;                font-size:16px;                font-weight:bold;                display:inline;            }

html代码:

求帮助,图片和文本要在一行显示_html/css_WEB-ITnose                    

第2截面第3测点裂缝计采集值1.06mm高于警戒值1mm

高手给看看,要如何改。

左边一个div,display:inline-block右边一个div,同样,图片放左边一个div,文字放右边一个,就行了

或者直接用table,方法与上类似

图片设置背景,append-left= 前面宽度
append-left是什么东东?

左边一个div,display:inline-block右边一个div,同样,图片放左边一个div,文字放右边一个,就行了

或者直接用table,方法与上类似
不想用table,按你说的第一种方式不管用,能不能具体点?多谢。

图片设置背景,append-left= 前面宽度
append-left是什么东东?
是 padding-left 写错了

你改成这样试试

            p.context{                margin:0px;                font-size:16px;                font-weight:bold;                padding-left:50px;                background:url(img/warning.png) no-repeat;            }

左边一个div,display:inline-block右边一个div,同样,图片放左边一个div,文字放右边一个,就行了

或者直接用table,方法与上类似
不想用table,按你说的第一种方式不管用,能不能具体点?多谢。
用 display:inline-block样式让div渲染为行内元素,就不会换行了,只要尺寸合适不被挤下去
或者 用float:left 让div浮动,同样不会换行,只要尺寸合适不被挤下去




文字

明白了?

图片设置背景,append-left= 前面宽度
append-left是什么东东?
是 padding-left 写错了

你改成这样试试

            p.context{                margin:0px;                font-size:16px;                font-weight:bold;                padding-left:50px;                background:url(img/warning.png) no-repeat;            }

按照你说的真的解决了,谢谢你。

左边一个div,display:inline-block右边一个div,同样,图片放左边一个div,文字放右边一个,就行了

或者直接用table,方法与上类似
不想用table,按你说的第一种方式不管用,能不能具体点?多谢。
用 display:inline-block样式让div渲染为行内元素,就不会换行了,只要尺寸合适不被挤下去
或者 用float:left 让div浮动,同样不会换行,只要尺寸合适不被挤下去




文字

明白了?

用其他的方式解决了问题,不过还是要谢谢你。

问题解决了,

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
宜家博客
关于前端开发IDE。_html/css_WEB-ITnose html教程

关于前端开发IDE。_html/css_WEB-ITnose

各位大牛能介绍一款满足下列要求的前端IDE给我吗?谢谢 JS、CSS语法关联、高亮(主要是有时会忘记一些关键字,查询API较麻烦)。 有类似Brackest在html结构下修改关联css的功能(非必要...
img在div中居中的问题 html教程

img在div中居中的问题

Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: