Question

如何在此图库中的每张照片下添加评论部分？（你可以在这里查看我希望做的图片： - 不会让我发布链接，因为我是新成员.... zhttp：//www.some-things.net/storage/ Picture109.p ng）

我知道iframe可能不是最好的工作方式 - 但我的朋友想要一个带有wordpress集成的横向滚动区域，我找不到任何合适的图库插件。

图像以ul / li显示 - 但由于它是显示内联，因此不会让我放入每张图像下方的另一个div。

http://www.some-things.net/storage/anna/wordpress/?page_id=49

基本上我想在每张图片下面创建一个部分，如果需要的话，还包含评论空间 - 如上图所示。

所需代码的任何提示都会很棒！

Answer 1

将图像和内容放在div中，~~将所有这些div浮动到左侧。~~使用inline-block作为显示和空格：no-wrap。

<html>
<head>
<style type="text/css">
#container {
    white-space: nowrap;
}
.image {
    display: inline-block;
    width: 150px;
}
.comment {
    display: block;
    white-space: normal;
}
</style>
<div id="container"><p>
  <div class="image">
    <div style="height: 200px; width: 150px; background: gold;"></div>
    <div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
  </div>
  <div class="image">
    <div style="height: 200px; width: 150px; background: gold;"></div>
    <div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
  </div>
  ...
  ...
</p></div>

如何在ul / li中设置注释部分的样式

1 个答案: