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

WBOY
Freigeben: 2016-06-24 12:23:07
Original
1248 Leute haben es durchsucht

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;            }
Nach dem Login kopieren

html代码:
<img  src="img/warning.png" id="pic"/ alt="求帮助,图片和文本要在一行显示_html/css_WEB-ITnose" >                    <p class="context">第2截面第3测点裂缝计采集值1.06mm高于警戒值1mm</p>
Nach dem Login kopieren

高手给看看,要如何改。

左边一个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;            }
Nach dem Login kopieren
Nach dem Login kopieren


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

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


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

文字



明白了?



图片设置背景,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;            }
Nach dem Login kopieren
Nach dem Login kopieren


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



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

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


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

文字



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

问题解决了,
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage