正确对齐图像标题 [英] Correctly aligning image captions

问题描述

我怎样才能达到这样的布局？

现在我使用这个HTML：

 < div class =image> ; 
< img> 
< div class =caption> 
标题文本
< / div> 
< / div> 
  

而这个CSS：

  .image {
 background-color：＃2A2A2A; 
} 
 
 img {
最大宽度：590px; 
 
  

但是 .image 框太大（因为它展开以适合其父）：

解决方案

关键是 not 设置宽度 img 元素或父容器。如果父项 .image 只是简单地浮动或以任何其他方式进行调整，以便缩小至其内容的大小，则这应该起作用。

我使用 float 来实现收缩包装方面，但 position：absolute; 会做同样的事情，就像 display：inline-block; 。

在 JS Bin ，它使用一些jQuery来交换图像，但它对任何元素的宽度没有任何影响。下面再转载CSS：

  .image {
 float：left; //收缩包装
 padding：1em; //实现边框效果
背景颜色：＃666; //仅用于对比
 -moz-border-radius：2em; //对于那个web 2.0的好处... 
 -webkit-border-radius：2em; 
 border-radius：2em; 
} 
 .image img {
 -moz-border-radius：2em; //没有宽度，任何地方。推测宽度：自动，将
 -webkit-border-radius：2em; //工作，但这是多余的，因为它是默认的
 border-radius：2em; 
} 
 .image img + .caption {
 width：100％; //强制使用.caption占据宽度的100％
 background-color：#ffa; //除了填充以外，它的父元素是
} //与上图中的宽度相同。 
  

How can I achieve a layout like this?

Right now I'm using this HTML:

<div class="image">
  <img>
  <div class="caption">
    Caption Text
  </div>
</div>

And this CSS:

.image {
  background-color: #2A2A2A;
}

img {
  max-width: 590px;
}

But the .image box is too big (since it expands to fit its parent):

解决方案

The key is to not set a width for the img element, or the parent container. If the parent, .image is simply floated or in any other way adapted so that it shrinks to the size of its contents, this should work.

I used float to achieve the shrink-wrap aspect, but position: absolute; would do the same, as would display: inline-block;.

There's a demo over at JS Bin, which uses some jQuery to swap the images around, but it does nothing to the width of any elements. The CSS is reproduced below:

  .image {
    float: left;    // for the shrink wrap
    padding: 1em;   // To achieve the bordered effect
    background-color: #666;  // just for contrast
    -moz-border-radius: 2em;  // for that web 2.0 goodness...
    -webkit-border-radius: 2em;
    border-radius: 2em;
  }
  .image img {
    -moz-border-radius: 2em;    // no width, anywhere. Presumably width: auto, would  
    -webkit-border-radius: 2em; // work, but that's redundant, since it's the default
    border-radius: 2em;
  }
  .image img + .caption {
    width: 100%;              // forcing the .caption to take up 100% of the width
    background-color: #ffa;   // of its parent, except for the padding, so that it's
  }                           // the same width as the image above.

这篇关于正确对齐图像标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！