0

No tengo apenas conocimiento de CSS, HTML, ETC.

Estoy intentando mostrar una imagen a un lado de un texto del cuerpo del html con align=right y estoy intentando mostrar esa imagen con un subtexto explicativo usando figure y subcaption. El problema es que combinar ambas condiciones con los efectos deseados me es imposible.

El resultado de mis copy/paste de distintas preguntas de Stackoverflow es la imagen al lado izquierdo del figure que toma todo el ancho del div, igual que el subtexto cuyo background colorea todo el bottom del div.

Lo que yo quiero es que el background y el figure se amolden al ancho de la imagen y este aparezca al lado derecho del div.

Lo que llevo hecho hasta ahora:

HTML:

...
<div id="post">
    <figure>
         <img src='content/images/4d5e67.jpg' height="30%" width="30%" align='right'/>
         <figcaption>subtexto</figcaption>
    </figure>
    ...contenido...
</div>

CSS:

...
figure {
    border: thin #c0c0c0 solid;
    flex-flow: column;
    padding: 5px;
    display: flex;
        
}
figure img{
    align:'right';
}

figure figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
    float: right;
}

¿Qué palabras mágicas necesito para que esto se muestre como quiero?

4
  • podrías pasar una imagen con algún ejemplo, para ver mas o menos de lo que estas tratando de hacer?
    – Roy
    Commented el 19 abr. 2021 a las 17:41
  • No sé como va a ayudar esto: pasteboard.co/JY5dPW8.png Commented el 19 abr. 2021 a las 17:51
  • yo te pedía de un ejemplo de lo que quieres lograr, porque yo entendí lo mismo que @eduardo pero veo que no es lo que buscabas.
    – Roy
    Commented el 19 abr. 2021 a las 17:59
  • ¿Se entiende ya mejor lo que busco? De lo que muestro, el subtexto debajo y el figure ajustado al contenido que aparece debajo. Gracias @Daniel Commented el 19 abr. 2021 a las 18:15

1 respuesta 1

0

Ya que estás usando un archivo CSS y flex-box sobre los elementos te sugeriría no usar directivas CSS en el <figure> o <figcaption>

.post {
  display: flex;
  justify-content: space-around;
  background-color: bisque;
  padding-left: .8rem;
}

figure {
  border: thin #c0c0c0 solid;
  flex-direction: row-reverse;
  padding: 5px;
  width: 50%;
  display: flex;
}

figure img {
  width: 50%;
}

figure figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: .5rem;
}

.content {
  width: 50%;
  align-self: center;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex Function Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <div class="post">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis a quod tenetur aperiam cum maxime est deserunt sit, eaque aliquid eveniet veritatis laborum nemo alias quaerat libero delectus distinctio vero. Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Animi eius impedit soluta beatae natus eveniet, perferendis veniam. Sequi necessitatibus eos exercitationem tempore alias, fuga ducimus sit aliquid corrupti, minus cum.
    </div>
    <figure>
      <img src='https://astelus.com/wp-content/viajes/Lago-Moraine-Parque-Nacional-Banff-Alberta-Canada.jpg'>
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam laborum animi aspernatur, fuga, accusantium explicabo doloremque. Nihil aliquam sapiente neque suscipit velit? Cumque eos ex voluptatibus optio dolorum illo excepturi.</figcaption>
    </figure>
  </div>

</body>

</html>

6
  • Ese row-reverse ha sido mágico. El subtexto lo quiero bajo la imagen, no a un lado. Es el texto lo que quiero a un lado. Grazie Commented el 19 abr. 2021 a las 17:29
  • Además el figure me sigue ocupando todo el ancho del div Commented el 19 abr. 2021 a las 17:33
  • @queAnyoEsEste ¿Te refieres a algo así? Commented el 19 abr. 2021 a las 17:52
  • A ver, el row-reverse me pone la imagen del figure al lado del div que busco, pero el subtexto a un lado y el column me pone el subtexto donde toca pero la imagen al lado que le da la gana. Por otro lado lo que has mostrado es lo que describo, pero no quiero andar diviendo el contenido del post en divs. Quiero que se ajuste por float o algo similar. Hacer flex el post me ha hecho de columnas todos elementos que hay en él. @Eduardo Commented el 19 abr. 2021 a las 18:14
  • Ya edité la respuesta original, es que se me dificulta ver qué es lo que quieres Commented el 19 abr. 2021 a las 18:15

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.