0

我怎样才能实现这样的布局？

现在我正在使用这个 HTML：

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

这个CSS：

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

img {
  max-width: 590px;
}

但是.image盒子太大了（因为它会扩展以适应其父级）：

替代文字

4

6 回答 6

2

关键是不要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.
于 2010-10-08T19:30:39.047 回答
1

正如@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;
}

我留给你任何你可能觉得需要的进一步的风格改进。

于 2010-10-08T19:36:47.090 回答
0

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

所以基本上，你需要以下 CSS：

.image {
    padding: 10px;
    width: 300px; /* assuming the picture is 300px */
}
于 2010-10-08T18:32:07.100 回答
0

尝试以下操作：

.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 中进行了尝试和测试 - 它工作正常。

于 2010-10-08T18:50:45.590 回答
0

我想出了另一个解决方案。我不相信 David Thomas 的回答会使标题出现在图像中（如果我错了，一定要纠正我），所以试试下面的代码（我使用了我的代码和 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>
于 2010-10-08T19:37:50.127 回答
0

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

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

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

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

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

于 2010-10-08T18:43:00.127 回答