Limite o texto à largura da imagem / largura automática do irmão no CSS

Question

Estou essencialmente tentando criar uma versão do elemento "Figura" (próximo ao HTML5), pelo qual tenho uma imagem com uma breve descrição abaixo dela.

No entanto, quero limitar a largura de todo esse elemento ao da imagem, para que o texto não seja mais largo que a imagem (envolvendo várias linhas, se necessário).

HTML básico:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

Eu sou bem versado com CSS, mas não consigo pensar em nenhuma solução pura de CSS, sem adicionar um style="width:100px" para o div Para corresponder à largura da imagem.

Atualizar: Depois de um pouco de pesquisa e pensamento, o melhor método parece estar usando uma largura embutida na div. Manterei o atributo de largura na imagem, caso deseje que a div seja um pouco mais larga que a imagem (por exemplo, para acomodar uma legenda mais longa).

Essa abordagem também significa que eu poderia ter duas imagens lado a lado com uma legenda abaixo. Se eu tiver um conjunto de imagens do mesmo tamanho, é claro que posso adicionar um estilo extra a cada div.

Obrigado a todos que responderam!

Answer 1

Folha de estilo

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

Nota: Para ativar o embrulho, remova a última linha CSS

Html

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Eu verifiquei no Chrome, Firefox e IE7 e fica bem nos três. Sei que isso tem a largura na div e não no IMG, mas pelo menos você só precisa definir a largura em um só lugar. Antes de usar as expressões CSS (apenas por exemplo), não consigo ver uma maneira de definir a largura externa das divs na largura do primeiro elemento infantil.

Answer 2

Isso também pode ser realizado usando 'display: table-caption' Para a legenda, como segue:

Html

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

Folha de estilo

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

Este bloco também pode ser flutuado à esquerda da direita de outro texto. Eu testei isso no IE8+. Aqui está um exemplo jsbin: http://jsbin.com/xiyevovelixu/1

Answer 3

Para definir a largura para corresponder à imagem automaticamente, você pode usar

.figure {
  display: table;
  width: 1px;
}

Isso faz com que a div se comporte como uma tabela (não suportada no Internet Explorer). Ou você pode usar uma tabela em vez da div. Eu não acho que exista outra maneira de definir a largura automaticamente.

Editar: A maneira mais simples é esquecer a largura automática e defini -la manualmente. Se for realmente necessário, você pode usar JavaScript ou uma tabela. Nesse caso, o uso de uma tabela não é tão feio porque você está abordando uma limitação da versão HTML. No caso de script do lado do servidor, você também pode definir a largura ao gerar a página.

Answer 4

Eu tive o mesmo problema e depois de ler isto decidiu usar um estilo embutido no elemento circundante. Parece a melhor solução sobre o uso de uma tabela para mim.

Answer 5

Você poderia usar o display:table solução para todos os outros navegadores e um Comportamento do CSS para o Internet Explorer.