Potrzebujesz kodu do owijania tekstu wokół obrazu? Zwykle podczas tworzenia strony HTML wszystko przepływa liniowo, co oznacza jeden blok bezpośrednio po drugim. Wszystkie moje poprzednie posty są tego przykładem, tzn. tekst, potem obrazek, potem tekst itd.

Czasami możesz chcieć dołączyć tekst obok obrazu zamiast pod nim. Nazywa się to zawijaniem tekstu wokół obrazu. W rzeczywistości zawijanie tekstu za pomocą HTML^(HTML) jest dość łatwe . Pamiętaj, że nie musisz używać CSS , aby zawijać tekst.

Jednak w dzisiejszych czasach W3C zaleca używanie CSS zamiast HTML do tego rodzaju zadań. Wymienię obie metody poniżej, ale jeśli możesz, lepiej użyć CSS , ponieważ jest on bardziej przystosowany do responsywnych projektów stron internetowych.

Zawijaj tekst wokół obrazu za pomocą HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Aby tekst zawijał się po prawej stronie obrazu, musisz wyrównać obrazek do lewej:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Jeśli chcesz, aby tekst pojawiał się po lewej stronie, a obraz po prawej, po prostu zmień parametr wyrównania na „w prawo”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

Otóż ​​to! Całkiem^(Pretty) łatwe, prawda? Jedynym przypadkiem, w którym chciałbyś użyć CSS , jest dodanie marginesów do obrazów, aby było trochę miejsca między tekstem a obrazem.

Możesz dodać marginesy do obrazu, używając następującego kodu stylów CSS :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Powyższy kod używa elementu MARGIN CSS , aby dodać 10 pikseli odstępu po prawej stronie obrazu. Ponieważ wyrównaliśmy obraz do lewej, chcemy dodać spację po prawej stronie.

Zasadniczo cztery liczby reprezentują GÓRA PRAWA DÓŁ LEWA^{(TOP RIGHT BOTTOM LEFT)} . Więc jeśli chcesz dodać białą przestrzeń do obrazu wyrównanego do prawej, zrobisz to:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Tak więc użycie HTML do wykonania tego zadania jest dość proste, ale po raz kolejny może nie działać dobrze w przypadku responsywnych witryn.

Zawijaj tekst wokół obrazu za pomocą CSS

Lepszym sposobem na zawijanie tekstu wokół obrazu jest użycie CSS . Zapewnia lepszą kontrolę ziarna nad rozmieszczeniem elementów i działa lepiej z nowoczesnymi standardami kodowania.

<img src="IMAGE URL" alt="A photo" class="left" />

Mimo że umieściłem CSS bezpośrednio w tagu obrazu w przykładzie HTML , naprawdę nigdy nie powinieneś już tego robić. Zamiast tego powinieneś mieć osobny plik zwany arkuszem stylów, który zawiera cały kod CSS .

W tagu IMG po prostu przypisujesz klasę do tagu i nadajesz mu nazwę. W moim przykładzie nazwałem klasę left . W moim arkuszu stylów wszystko, co muszę zrobić, to dodać następujący kod:

.left {
 float: left;
 padding: 0 10px 0 0;}

Jak widać, dodałem 10px wypełnienia po prawej stronie wyrównanego do lewej obrazu. Użyłem również właściwości float, aby przenieść obraz z normalnego przepływu dokumentu i umieścić go po lewej stronie kontenera nadrzędnego.

Jak widać, jest to znacznie czystsze niż dodawanie całego tego kodu do samego tagu IMG . Jest również łatwiejszy w zarządzaniu i możesz użyć o wiele więcej właściwości CSS , aby dostosować wygląd swojej strony internetowej. Jeśli masz jakieś pytania, śmiało możesz je komentować. Cieszyć się!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an іmage? Normally when you create an HTML page, everything flows linearly, mеaning one block directly aftеr another. All of my previous posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Jak zeskanować kod QR na iPhonie i Androidzie?

• Jak drukować wiadomości tekstowe z Androida

• Zapisz listę uruchomionych procesów w pliku tekstowym w systemie Windows

• Jak pobierać pliki i wyświetlać kod z GitHub

• Szukaj w wielu plikach tekstowych jednocześnie

• Jak sprawić, by komputer odczytał tekst na głos

• SynWrite Editor: darmowy edytor tekstu i kodu źródłowego dla systemu Windows 10

• Jak obracać tekst i obrazy w Photoshopie

• Jak wyświetlić kod źródłowy oprogramowania typu open source?

• Wyodrębnij tekst z plików PDF i obrazów

• Jak zrobić kod QR

• Jak przesyłać wiadomości tekstowe z iPhone'a na Androida?

• Jak przekonwertować dysk dynamiczny na dysk podstawowy

• Utwórz kopię zapasową obrazu systemu Windows 10

• Jak dodać muzykę do Prezentacji Google

• Jak zaktualizować Raspberry Pi

• Jak wyłączyć klawisz Windows

• Jak otworzyć plik HTML w Google Chrome

• Wyłącz kontrolę konta użytkownika (UAC) dla określonej aplikacji

• Napraw kod błędu aktualizacji systemu Windows 8E5E03FA