Please help, pictures and text should be displayed on one line_html/css_WEB-ITnose

html text arrangement

If you want to achieve the following style, the left side is the picture and the right side is the text.

The second line of text I made protrudes further forward than the first line, and the text is not aligned. I don't know how to achieve text alignment.

Reply to the discussion (solution)

Set the background of the image, append-left= front width

How did you implement it, set the image block , and then use float?

You can also use background-image padding-left to implement

css code:

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 code:

<img src="img/warning.png" id="pic"/>                    <p class="context">第2截面第3测点裂缝计采集值1.06mm高于警戒值1mm</p>

Experts can show me how to change it.

A div on the left and a div on the right of display:inline-block. Similarly, put the picture in a div on the left and the text in a div on the right. That's it.

Or use table directly, the method is similar to the above

Set the background of the picture, append-left= front width
What is append-left?

A div on the left and a div on the right of display:inline-block. Similarly, put the picture in a div on the left and the text in a div on the right. That's it.

Or use table directly, the method is similar to the above
I don’t want to use table. The first method you mentioned doesn’t work. Can you be more specific? Thank you.

Set the background of the picture, append-left= front width
What is append-left?
The padding-left is written incorrectly

Try changing it to this
94b732d776d8fa1190b1c415805dd580
                                                                                                                                                                                                                        ba4ef381d47334f53cf957371120cbb4 div, just put the text on the right one

Or use table directly, the method is similar to the above

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

I don’t want to use table, the first method you said doesn’t work, can you be more specific? Thank you.

Use the display:inline-block style to render the div as an inline element, and it will not wrap. As long as the size is appropriate, it will not be squeezed out.

Or use float:left to make the div float. It will also not wrap, as long as the size is appropriate. Not to be squeezed in

dc6dce4a544fdca2df29d5ac0ea9906b
bf8a4512ab416acde5de595fa61e94fa6ed09268cbdd0015bce8dcbbdfa9bfe416b28748ea4df4d9c2150843fecfba68
6b56aef45c3946a8a5670bfeeac7b623Text16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Got it?



Set the background of the image, append-left= front width
What is append-left?
The padding-left is written incorrectly

Try changing it to this
94b732d776d8fa1190b1c415805dd580
& lt; p class = "context" & gt;




I really solved what you said, thank you.

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

A div on the left, display:inline-block a div on the right. Similarly, put the picture in a div on the left and the text in a div on the right. That's it.

Or use table directly , the method is similar to the above

I don’t want to use table, the first method you mentioned doesn’t work, can you be more specific? Thank you.

Use the display:inline-block style to render the div as an inline element, and it will not wrap. As long as the size is appropriate, it will not be squeezed out.
Or use float:left to make the div float. It will also not wrap, as long as the size is appropriate. Not to be squeezed out

dc6dce4a544fdca2df29d5ac0ea9906b
bf8a4512ab416acde5de595fa61e94fa6ed09268cbdd0015bce8dcbbdfa9bfe416b28748ea4df4d9c2150843fecfba68
6b56aef45c3946a8a5670bfeeac7b623Text16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Got it?
Solved the problem in other ways, but thank you anyway.

Problem solved,