Querría saber como puedo alinear una imagen mediante css en la esquina inferior derecha de un texto. He probado con un float:right y vertical-align: text-bottom, pero no surge el efecto deseado.
Aquí abajo les deje un ejemplo del resultado deseado.
Querría saber como puedo alinear una imagen mediante css en la esquina inferior derecha de un texto. He probado con un float:right y vertical-align: text-bottom, pero no surge el efecto deseado.
Aquí abajo les deje un ejemplo del resultado deseado.
Podrías hacerlo si conoces de antemano la altura de la imagen y de su contenedor. De esta forma podrías poner un elemento que "empuje" hacia abajo la imagen:
.main{
background-color: #cccccc;
height: 300px;
}
.spacer{
width: 0;
height: calc(100% - 205px);
float: right;
}
.image{
float: right;
height: 205px;
clear: right;
}
<div class="main">
<div class="spacer"></div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
AAAAAElFTkSuQmCC" class="image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
</div>
Pero para hacer algo más genérico creo que necesitarías utilizar javaScript.
No se exactamente el uso que le vas a dar.Si ese estilo es solo para un párrafo determinado..entonces podrías hacerlo con una tabla. De modo que la primera fila ocupe 2 columnas (de texto en tu caso),y de la segunda fila, pues primera columna el texto restante y la segunda columna la imagen.
algo así:
<div id="contenedor">
<table>
<tr>
<td colspan="2">
<p>gfghfghfhgfg hfhjfghfgfhgfhg fhgfhgfhgfhgfhg fhgfhgfhgfh</p>
</td>
</tr>
<tr>
<td>
<p>gfghfghfhgfg hfhjfghfgfhgfhg fhgfhgfhgfhgfhg fhgfhgfhgfh</p>
</td>
<td>
<img src="C:\original.jpg" alt="fotografia" width="50px" height="20px"> </td>
</td>
</tr>
</table>
</div>