Envolver el texto alrededor de una imagen es bastante atractivo para cualquier tipo de sitio web. Al usar HTML y CSS, es posible envolver una imagen con el texto y hay muchas maneras de hacerlo porque la forma de cualquier imagen no es constante. En HTML, podemos alinear la imagen a la derecha del texto, a la izquierda o al centro. En CSS, además de estos, también podemos insertar las imágenes en un círculo o rectángulo, etc. y podemos envolver un texto alrededor. También puede usar la propiedad exterior de forma CSS dependiendo de la forma de su imagen.
Los siguientes ejemplos ilustran el enfoque anterior:
Ejemplo 1: En este ejemplo, la imagen está flotando en el lado derecho de la pantalla y el texto envuelve la imagen. No requerimos la propiedad de forma exterior aquí porque la imagen de la forma es habitual (cuadrada).
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
body {
margin: 20px;
text-align: center;
}
h1 {
color: green;
}
img {
float: left;
margin: 5px;
}
p {
text-align: justify;
font-size: 25px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>
A Computer Science
Portal for Geeks
</b>
<div class="square">
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png"
alt="Longtail boat in Thailand">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, envolveremos diferentes imágenes de forma y aquí usaremos la propiedad exterior de forma de CSS para una mejor experiencia de visualización.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
body {
margin: 20px;
text-align:center;
}
h1 {
color: green;
}
/* This div design part is
used as an Image */
.round {
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
font-size: 30px;
float: left;
font-weight: bold;
/* Change the shape according
to the image */
shape-outside: circle();
background-color: Green;
color: white;
}
article{
padding-top: 75px;
display: inline-block;
}
p {
text-align: justify;
font-size: 22px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>
A Computer Science Portal for Geeks
</b>
<div class="round">
<article>GeeksforGeeks</article>
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/
algorithm/ interview questions? What did you
expect and what did you get? This portal has been
created to provide well written, well thought and
well explained solutions for selected questions.
An IIT Roorkee alumnus and founder of
GeeksforGeeks. He loves to solve programming
problems in most efficient ways. Apart from
GeeksforGeeks, he has worked with DE Shaw and
Co. as a software developer and JIIT Noida as
an assistant professor. It is a good platform
to learn programming. It is an educational
website. Prepare for the Recruitment drive of
product based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course.
</p>
</body>
</html>
Producción:
Usando la etiqueta de la tabla:
Usando esto, vamos a crear una tabla y dentro de las tablas en una columna pondremos la imagen y en otra columna cualquier información que desee insertar.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text around image</title> </head> <body> <h1 style="color: green; text-align: center;"> GeeksforGeeks </h1> <h3 style="color: black; text-align: center;"> A computer science portal </h3> <br> <table cellspacing="10"> <tr> <td> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png" alt="Longtail boat in Thailand"> </td> <td> <p> How many times were you frustrated while looking out for a good collection of programming/ algorithm/ interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </td> </tr> </table> </body> </html>
Producción :
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por sdutta203sagnik y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA