Question

我试图在缩略图下方显示缩略图，我想要一些文字。理想情况下，我认为我想将图像和文本包装在div中，其样式设置为内联。

因此想象一下，从左到右穿过屏幕的3张图片，每张图片下面是图片的描述。

我如何做到这一点？

Answer 1

你可以做到这一点的一种方法是将每个图像和描述对包含在div元素中，然后将这些div浮动到左边。

DEMO ：http://codepen.io/sajadtorkamani/pen/xbbrzE

<强> HTML

<div class="gallery">
  <div>
    <img src="http://placehold.it/300x200" />
    <p>Description goes here...</p>
  </div>
  <div>
    <img src="http://placehold.it/300x200" />
    <p>Description goes here...</p>
  </div>
  <div>
    <img src="http://placehold.it/300x200" />
    <p>Description goes here...</p>
  </div>
</div>

<强> CSS

.gallery div {
  float: left;
  margin-right: 1em;
}

Answer 2

我在这里使用seb nukem。我会使用display inline-block。

Answer 3

将每个图像+标题放在内联或浮动块中：

CSS

div.image {
  display:inline-block; /* or use float:left; */
}
.caption {
}

HTML

<div class="image"><!-- one div per image -->
  <img src="image.png">
  <div class="caption">Caption text here</div>
</div>
<div class="image">
  <img src="image2.png">
  <div class="caption">Caption text here</div>
</div>
...

演示：http://jsfiddle.net/5s5s4otc/

Answer 4

我会使用HTML <table>元素。尝试这样的事情：

＆＃13;

table {
  width: 100%;
}
td {
  text-align: center;
}

＆＃13;

<table>

  <tr>
    <td>
      <img src="http://placekitten.com/g/200/300" />
    </td>
    <td>
      <img src="http://placekitten.com/g/200/300" />
    </td>
    <td>
      <img src="http://placekitten.com/g/200/300" />
    </td>

  </tr>

  <tr>
    <td>Description goes here.</td>
    <td>Description goes here.</td>
    <td>Description goes here.</td>
  </tr>

</table>

＆＃13;

我希望这有帮助！如果您需要其他帮助，请在下方发表评论。

Answer 5

DEMO： http://jsfiddle.net/pwee167/67oc6k7r/ \

结果将是这样的：

enter image description here

HTML：

<div class="container">
    <img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
    <img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
    <img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<强> CSS：

.container
{
    float: left;
    max-width: 128px;
}

注意：我认为缩略图的尺寸将相同（大多数缩略图用例），这样我就可以设置最大宽度（使用max-width）持有图像和描述的容器的。这样可以防止文本溢出，并扩展容器。

Answer 6

在容器div上使用float或inline-block。请参见jsFiddle：http://jsfiddle.net/ckk2jprr/

HTML

<div>
    <div class="pic">
        <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
        <div>This is some text</div>
    </div>
    <div class="pic">
        <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
        <div>This is some text</div>
    </div>
    <div class="pic">
        <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
        <div>This is some text</div>
    </div>
</div>

CSS

.pic{
    float: left;
}

内联div无法正常工作

6 个答案: