正确对齐图像标题

Question

我该如何实现这样的布局？

现在，我使用这个HTML：

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

而这个CSS：

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

img { 
    max-width: 590px; 
} 

但.image箱子太大（因为它扩展以适应其父母）：

Answer 1

如果您将.image框的宽度设置为与图像相同的宽度，则将填充应用于.image框，您将得到您正在查找的边框，因为当您指定宽度时，会将填充添加到该边框。

因此，基本上，你需要下面的CSS：

.image { 
    padding: 10px; 
    width: 300px; /* assuming the picture is 300px */ 
} 

Answer 2

由于div的是块级元素，他们扩大，以满足他们的父母。

它可能不是最好的解决办法，但如果你不知道该图像的时间提前的大小，你可以做以下：

.image 
{ 
    padding: 10px; 
    max-width: 590px; 
    disply: inline; 
} 

.caption 
{ 
    background-color: #2A2A2A; 
    disply: inline; 
} 

以上将导致IMG的div是呈现为内联元素，它将缩小它以适合内容而不是其父级，并且padding将添加边框。

Answer 3

尝试以下操作：

.image { 
    position: relative; 
    width: 250px; 
} 
img { 
    border: 15px solid #777777; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    width: 100%; 
} 
.caption { 
    border-left: 15px solid #777777; 
    border-right: 15px solid #777777; 
    border-bottom: 15px solid #777777; 
    position: absolute; 
    width: 100%; 
    bottom: 0px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

<div class="image"> 
    <img src="yourImage" height="150px" /> 
    <div class="caption"> 
     Caption TextCaption TextCaption TextCaption TextCaption Text 
    </div> 
</div> 

现在我已经申请3个边框标题DIV的原因是因为你不知道没有边界的图像的宽度，但你知道的宽度图像边框。对标题应用相同的边框将使标题具有相同的宽度。当然，你需要调整.image的宽度和img标签的高度（这可以通过css来完成），但其余部分将会为你完成。此外，标题div将调整大标题的大小。

问候，

理查德

PS验证码已审结，在Chrome测试 - 它工作正常。

Answer 4

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

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

在JS Bin上有一个演示，它使用一些jQuery来交换图像，但它对任何元素的宽度没有影响。这个CSS被复制如下：

.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. 

Answer 5

正如@凯尔说，块元素调整其宽度，以适应其父母的。 将块元素设置为内联虽然不是正确的方法：您需要做的是将.image div设置为浮动元素，从而实现类似结果，同时保留块元素的特征。这样的伎俩CSS的应该是：

.image { 
    float: left; 
    display: inline; /* needed to fix the (IE <= 6) "3 pixels out of nowhere bug" */ 
    /* whatever code you may find appropriate in order to render the rounded border */ 
} 
.image .caption { 
    clear: left; 
} 

我离开你你会觉得需要进一步改进作风。

Answer 6

我想出了另一种解决方案。我不相信大卫托马斯的答案会使图像出现在图像中（通过一切手段纠正我，如果我错了），请尝试下面的代码（我已经使用了我的代码和Davids的组合）。

.image { 
    position: relative; 
    float: left; 
    border: 15px solid #777777; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
.caption { 
    position: absolute; 
    bottom: 5px; 
    left: 5px; 
} 
.image-container { 
    position: relative; 
} 

<div class="image"> 
    <img src="/Images/header1.png" /> 
    <div class="caption"> 
     Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text 
    </div> 
</div>