2

intento hacer una caja que creo es sencilla, pero no puedo subir el texto para que quede del lado derecho.

Pongo el ejemplo con HTML y CSS y una imagen de como busco que salga. Espero me puedan orientar. Gracias.

    .cajathumbnail {float: left;}
      .cajatitle { font:30px Archivo Black;display:inline-block;margin-bottom:20px;float:right;}
    <div class='cajathumbnail'> 
    <figure>
      <a href=''><img src='https://media-cdn.tripadvisor.com/media/photo-s/0d/49/11/4b/new-york-by-swift314.jpg'/></a>
      <figcaption class='cajatitle'><a href=''>Título del post a mostrar</a></figcaption>
 
     </figure>
    </div>

introducir la descripción de la imagen aquí

1
  • usas bootstrap, materialize o algún otro?
    – Fran Islas
    el 20 dic. 2018 a las 17:23

2 respuestas 2

3

Asumiendo que no se pueda cambiar el HTML y que sea necesario usar float, la solución más sencilla sería definir anchos para la imagen y para el contenedor del texto.

.cajathumbnail  figure > a {
  float: left;
  width: 75%;
}

.cajathumbnail figure > a img {
  width: 100%;
}

.cajatitle {
  font: 30px Archivo Black;
  display: inline-block;
  margin-bottom: 20px;
  float: right;
  width: 20%;
}
<div class='cajathumbnail'> 
  <figure>
    <a href='#'><img src='https://media-cdn.tripadvisor.com/media/photo-s/0d/49/11/4b/new-york-by-swift314.jpg'/></a>
    <figcaption class='cajatitle'><a href=''>Título del post a mostrar</a></figcaption>
 </figure>
</div>

Sería más fácil aún la solución con flexbox, definiendo a <figure> como el contenedor:

    .cajathumbnail figure {
      display: flex;
    }

    .cajatitle {
      margin-left: 10px;
      font: 30px Archivo Black;
      display: inline-block;
      margin-bottom: 20px;
    }
    <div class='cajathumbnail'> 
      <figure>
        <a href='#'><img src='https://media-cdn.tripadvisor.com/media/photo-s/0d/49/11/4b/new-york-by-swift314.jpg'/></a>
        <figcaption class='cajatitle'><a href=''>Título del post a mostrar</a></figcaption>
     </figure>
    </div>

1
  • Salió mejor con la opción de flexbox que sugeriste. Muchas gracias, Shaz.
    – Migueltron
    el 23 dic. 2018 a las 3:05
0

Te saldría mucho más fácil hacerlo con flex-box


.cajathumbnail{
  display: flex;
  width: 100%;
}

.cajathumbnail>h1{
  background-color: blueviolet;
  text-align: center;
  width: 100%;
}
<div class='cajathumbnail'> 
        
    <figure>
      <a href=''><img src='https://media-cdn.tripadvisor.com/media/photo-s/0d/49/11/4b/new-york-by-swift314.jpg'/></a>
    </figure>
    <h1>Título del post a mostrar</h1>
</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.