3

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.

Ejemplo de resultado deseado

2
  • Creo que no se puede, al menos de una manera "facil", ya que la única manera que el texto de adapte a la forma de la imagen, es que la imagen ya esté en su sitio, o sea, que la imagen debe ponerse antes que el texto, y en la posición que toca. Pero, al ir antes, no se puede saber el alto del contenido, porque el texto aun no está, de manera que no se puede calcular la posición. Y aun se pudiera, para mover verticalmente un elemento static, que "empuje" el texto, hay que modificar el margen superior, así que, el texto quedaría a un lado, no arriba. No se si me explico. Commented el 10 sept. 2016 a las 0:47
  • La manera "facil" de colcar algo en la esquina inferior derecha, es usando position absolute, bottom y right, pero como se sale del flujo, el texto no se aparta y quedaria tapado por detras. Se podría conseguir con JavaScript, pero creo que no seria nada facil y nada generico.... o al menos no se me ocurre. Commented el 10 sept. 2016 a las 0:48

2 respuestas 2

3

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.

2
  • Es buena solución, pero necesitaría algo mas genérico, porque todas las imágenes no tienen el mismo alto.
    – reinoso199
    Commented el 5 sept. 2016 a las 11:01
  • Pues, como te comentaba, me temo que sin usar javascript no vas a poder hacerlo Commented el 5 sept. 2016 a las 11:20
-1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.