求相助，图片和文本要在一行显示

求帮助，图片和文本要在一行显示
想要实现下面的样式，左边是图片，右边是文本。

我自己做的第二行文本比第一行向前突出一些，文本没有对齐。不知道怎么实现文本对齐。
html?文本互排
[解决办法]

引用:

Quote: 引用:

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

append-left是什么东东？

是 padding-left 写错了

你改成这样试试
<!--img src="img/warning.png" id="pic"/-->
                    <p class="context">

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

[解决办法]

引用:

Quote: 引用:

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

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

不想用table,按你说的第一种方式不管用，能不能具体点？多谢。

用 display:inline-block样式让div渲染为行内元素，就不会换行了，只要尺寸合适不被挤下去
或者 用float:left 让div浮动，同样不会换行，只要尺寸合适不被挤下去

<div>
<div style="float:left;"><img /></div>
<div style="float:left;">文字</div>
</div>

明白了？

查看更多 下一篇