包含文本答案

【问题标题】：Contain text within包含文本
【发布时间】：2013-06-30 07:00:25
【问题描述】：

CSS 问题：我想要一个包含 3 个内联图像的容器，它们周围有一个边框（不是每个图像）。在图像行下方和容器边框内，我想要一两句话。如果没有文本，容器边框的宽度和高度与使用 display:inline-block 的图像行大致相同，一旦我添加了文本，容器宽度就是 100%。我希望文本包裹在图像行下方，而不是超出图像行的左侧/右侧。我想知道如何做到这一点，以及是否可以使用 float:left 和/或 display:inline、display:inline-block 来完成。如果这两种方式都可以做到，有什么优点和缺点。

HTML：

<div class="container">
    <img src="image1">
    <img src="image2">
    <img src="image3">
    some text
</div>

CSS：

.container {
    display: inline-block;
    border: 1px solid black;
}

【问题讨论】：

标签： css

【解决方案1】：

以下将创建一个 div，其中包含用于图像的内部块和用于文本的块。他们都应该保持 500 像素。如果图像> 500px，它们将被剪裁。除非它是一个很长的不间断字符串，否则文本不会导致它溢出。

如果这没有帮助，请使用 jsFiddle 举个例子。

CSS

.container { 
        width: 500px; 
        overflow: hidden; 
        background:red; 
        display: inline-block;
        border: 1px solid black; 
}

HTML

<div class="container">
  <div class="images">
    <img src="image1">
    <img src="image2">
    <img src="image3">
  </div>
  <div class="caption">
    some text
  </div>
</div>

【讨论】：

不指定容器元素的宽度也可以吗？
是的，这只是为了演示。
使用您提供的示例，如果我删除静态宽度，则包含元素（图像行）的宽度会增加到文本的宽度。文本现在超出图像行的左侧和右侧。我想将文本限制在与图像行相同的宽度内。

【解决方案2】：

这是我想要的一个很好的例子，但图片下方有文字。我还希望它与 HTML 5 兼容。

<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>

.container {
display: inline-block;
border: 1px solid;
}

table {
margin: 0 auto;
}

【讨论】：