首頁 > web前端 > html教學 > 求帮助,图片和文本要在一行显示_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 12:23:07
原創
1251 人瀏覽過

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


求帮助,图片和文本要在一行显示_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;            }
登入後複製
登入後複製


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



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

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


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

文字



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

问题解决了,
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板