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?