1

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

2 回答 2

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>
于 2013-06-28T01:57:16.643 回答
0

这是我想要的一个很好的例子，但图片下方有文字。我还希望它与 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;
}
于 2013-06-29T23:00:25.687 回答