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

                                                                                                                                                                                                                       

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

Text

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

& 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

Text

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

Problem solved,