Question

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;
}

Answer 1

以下将创建一个div，其中包含图像的内部块和文本块。他们都应该保持500px。如果图像是> 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>

Answer 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;
}

包含文本

2 个答案: