Question

如何实现这样的布局？

现在我正在使用这个HTML：

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

这个CSS：

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

img {
  max-width: 590px;
}

但是.image框太大了（因为它扩展到适合它的父级）：

alt text

Answer 1

关键是不设置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 2

正如@Kyle所说，块元素会调整它们的宽度以适合它们的父级。虽然将块元素设置为内联，但这不是正确的方法：您需要做的是将.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 3

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

基本上，您需要以下CSS：

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

Answer 4

由于div是块级元素，因此它们会扩展为适合其父级。

这可能不是最好的解决方案，但如果您不提前知道图像的大小，可以执行以下操作：

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

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

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

Answer 5

尝试以下方法：

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

我想出了另一个解决方案。我不相信大卫托马斯的回答使标题出现在图像中（如果我错了，一定要纠正我），所以请尝试下面的代码（我使用了我的代码和戴维斯的组合）。

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

正确对齐图像标题

6 个答案: