Question

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

First Codepen：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>

第二个Codepen：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，然后用户可以点击其中一个链接。

<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

灯箱标语或标题

1 个答案: