Avisos
Vaciar todo

[Resuelto] Imagen y texto en una misma línea con y  

 
Miguel Ángel
 Miguel Ángel
Reputable Member

Buenas noches.

Mediante HTML y CSS me gustaría obtener una imagen y un texto en la misma línea. El texto consta de una parte con link y otra parte sin él. La segunda parte debería aparecer en una nueva línea. Os adjunto lo que deseo obtener:

Section div problem bien

Para conseguir esto estoy empleando el código que os adjunto más abajo, en (*). Casi consigo lo que deseo, pero me falta un detalle relativo a las dos partes de las que consta el texto asociado a la imagen. En concreto, el resultado (parcialmente incorrecto) que consigo es:

Section div problem

Si me pudierais ayudar a lograr mi objetivo totalmente (al 100%), os estaría agradecido.

P.S. (*)

HTML

<section class="section-VC">
<div><a href="https://tidd.ly/3u3266r"><img class="alignnone size-full wp-image-5129" src="https://ocioybelleza.com/wp-content/uploads/2022/03/con-vitamina-c-de-Olay.jpg" alt="con-vitamina-c-de-Olay" width="283" height="283" /></a></div>
<div><a href="https://tidd.ly/3u3266r">Crema facial iluminadora Regenerist Vitamin C + Aha 24, de Olay</a>. Esta crema proporciona una piel más luminosa, un tono de piel uniforme y una hidratación al instante.</div>
</section>

CSS

.section-VC {
font-family: 'Helvetica','Arial','sans-serif','Helvetica Neue';!important;
font-size: 1.00em !important;
font-weight: 400 !important;
color: #151515 !important;
display: inline-grid;
grid-template-columns: auto auto;
grid-gap: 0;
}

.section-VC>div {
border: 0px;
padding: 6px 10px;
display: flex;
align-items: center;
justify-content: space-around;
}

.section-VC>div:first-child {
}

.section-VC>div:last-child img:last-child {
margin-left: 4px;
}

Contenido solo visible a usuarios registrados

Respondido : 26/03/2022 11:13 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola miguel,

Creo que podrías orientar mejor el código de esta forma:

<div id="contenedor">
<div id="primero"><img class="alignnone size-full wp-image-5129" src="http://ppe.climbingtechnology.com/wp-content/uploads/2019/02/Categoria-Piastrine-283x283.jpg" width="200" height="200" /></div>
<div id="segundo"><a href="https://tidd.ly/3u3266r">Crema facial iluminadora Regenerist Vitamin C + Aha 24, de Olay</a>. Esta crema proporciona una piel más luminosa, un tono de piel uniforme y una hidratación al instante.</div>
</div>

y en el css:

#contenedor {
width: 400px;
border: none;
overflow: hidden;
align-items: center;
}
#primero {
width: 200px;
float:left;
border: none ;

}
#segundo {
border: none;
overflow: hidden;
padding-top:10% !important;
padding-left: 3% !important;
}

Sustituyes tu imagen, la he cambiado por que no se visualizaba en mi constructor.

Un saludo 

Respondido : 26/03/2022 11:45 pm
Miguel Ángel me gusta

Cursos Gratuitos WordPress

Miguel Ángel
 Miguel Ángel
Reputable Member

@argenis

Sí. Es perfecto. Justo lo que necesitaba. 😊 

Por mi parte damos el tema por cerrado.

Muchas gracias y un saludo cordial. 🖐️ 

Respondido : 27/03/2022 10:54 am