灯箱标语或标题

Question

我试图在每张灯箱照片下添加一个标题或标签，但第二次这样做会使所有图片垂直，而不是水平堆叠在一行中或在不同的浏览器中可折叠。我将添加代码笔，因为 java 脚本对于此处的代码片段来说太长了。第一个显示我希望灯箱运行的方式（没有标语），然后第二个显示我想要的标语，但堆叠方式错误。如果有人能帮我弄清楚这个问题，那将非常有帮助！谢谢！

第一个代码笔：http://codepen.io/anon/pen/XpLjOp

<div id="recentwork">
<h2 id="recent"> Most Recent Work</h2>


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2   /Seesmic_Logo.png" data-lightbox="website" data-title="">
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
    </a>

第二个代码笔：http://codepen.io/anon/pen/dNBpQm

<div id="recentwork">
<h2 id="recent"> Most Recent Work</h2>


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
    </a>
    <h3> Title</h3>


    <a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
    </a>
    <h3> Title</h3>

<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
        </a>
        <h3> Title</h3>

    <a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
        </a>
        <h3> Title</h3>


  </div>

Answer 1

您可以将 h3 包含在 a 中，然后用户可以单击任一以关注 link。

<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
    <h3> Title</h3>
</a>

要水平排列图像，请使用：

#recentwork a {
  display: inline-block;
}

codepen

灯箱标语或标题

Lightbox taglines or titles

html

javascript

css

jquery

lightbox