视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
求帮助,图片和文本要在一行显示_html/css
2020-11-27 15:44:44 责编:小采
文档
 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代码:
 

第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(https://www.gxlcms.com/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(https://www.gxlcms.com/img/warning.png) no-repeat; }


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



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

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



文字


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

问题解决了,

下载本文
显示全文
专题