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

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代码：

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

高手给看看，要如何改。

左边一个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浮动，同样不会换行，只要尺寸合适不被挤下去

文字

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

问题解决了，