CSS - Cómo colocar texto alrededor de una imagen

Pos: 66

Val: 11

Cómo colocar texto alrededor de una imagen

Publicado por Carles (5 intervenciones) el 10/02/2021 22:02:05

Hola, buenas tardes a todos. Estoy desarrollando una página web. Estoy iniciándome en esto y quiero indagar un poco más para poder dedicarme a esto. Complemento estudios con práctica, práctica que la estoy llevando a cabo, desarrollando un sitio web de un colegio.

El tema es el siguiente: Necesito hacer reseñas de los profesores y quiero que se vea la imagen a un lado, da lo mismo izquierda o derecha, y según donde vaya la fotografía, al otro lado que vaya el titulo y el texto, sin embargo, no he podido modificarlo. He intentado modificar el CSS, pero no me resulta, lo máximo que logré fue que el texto quedara sobre la imagen.

¿Alguien sabe cómo hacerlo? ¿en qué estoy fallando?

Me dicen que intente con Boostrap, ¿será conveniente? ¿o es más fácil solucionarlo por intermedio del CSS?

Saludos y muchísimas gracias.

Captura-de-Pantalla-2021-02-10-a-las-17.49.47

Captura-de-Pantalla-2021-02-10-a-las-17.49.47

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 870

Cómo colocar texto alrededor de una imagen

Publicado por joel (252 intervenciones) el 11/02/2021 09:06:07

Hola Carles, se puede solucionar de varias maneras... ya sea con div's flotante, span, grids, o flex...

No muestras tu codigo por lo que no se muy bien como lo tienes, pero una manera sencilla...

<div style="float:left">texto</div>

<div style="float:right">imagenes</div>

Si nos muestras tu texto, intento indicarte

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 66

Val: 11

Cómo colocar texto alrededor de una imagen

Publicado por Carles (5 intervenciones) el 11/02/2021 14:58:14

Hola Joel, muchísimas gracias por la amabilidad de responder.Éste es el código html:
Captura-de-Pantalla-2021-02-11-a-las-10.57.25

Valora esta respuesta

Comentar

Pos: 1

Val: 870

Cómo colocar texto alrededor de una imagen

Publicado por joel (252 intervenciones) el 11/02/2021 15:01:49

Te lo agradezco Carles, pero lo no puedo copiar y pegar para prepararte un ejemplo... puede pegar el código?

Valora esta respuesta

Comentar

Pos: 66

Val: 11

Cómo colocar texto alrededor de una imagen

Publicado por Carles (5 intervenciones) el 11/02/2021 15:25:15

Por supuesto

</header>

	<!-- / header -->

	<div class="divider"></div>

	<div class="content">

		<div class="container">

			<div class="main-content">

				<h1>Profesores</h1>

				<section class="posts-con">

					<article>

						<div class="pic"><img width="121" src="images/profes.png" alt=""></div>

				<div class="info">

					<br>

                    <hr></div>

						<div class="info">

							<br>

							<h3>Profesor Nicolás Aguilera Huerta</h3>

							<img src="images/profe3.JPG" widht="300" height="300">

							<p class="info-line"><span class="time"></span><span class="place"></span></p>

							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

						</div>

					</article>

Valora esta respuesta

Comentar

Pos: 1

Val: 870

Cómo colocar texto alrededor de una imagen

Publicado por joel (252 intervenciones) el 11/02/2021 19:04:41

Carles, te he preparado un simple ejemplo con tus datos, para que lo veas correctamente...

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

* {

        box-sizing: border-box;

    .pic {float:left;width:50%;border:1px solid red;}

    .info {float:right;width:50%;border:1px solid green;}

    </style>

</head>

<body>

<div class="content">

    <div class="container">

        <div class="main-content">

            <h1>Profesores</h1>

            <section class="posts-con">

                <article>

                    <div class="pic">

                        <img width="121" src="images/profes.png" alt="">

                    </div>

                    <div class="info">

                        <h3>Profesor Nicolás Aguilera Huerta</h3>

                        <img src="images/profe3.JPG" widht="300" height="300">

                        <p class="info-line"><span class="time"></span><span class="place"></span></p>

                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

                    </div>

                </article>

            </section>

        </div>

    </div>

</div>

</body>

</html>

Valora esta respuesta

Comentar

Cambiar la fuente predeterminada de Boostrap

paginacion con bootstrap 4