【问题标题】:How to style a comment section in ul/li如何在 ul/li 中设置评论部分的样式
【发布时间】:2010-06-26 09:15:54
【问题描述】:

如何在此图库中的每张照片下添加评论部分? (您可以在此处查看我希望执行的操作的图像: - 因为我是新成员,所以不让我发布链接.... zhttp://www.some-things.net/storage/图片109.png)

我知道 iframe 可能不是解决此问题的最佳方式 - 但我的朋友想要一个带有 wordpress 集成的横向滚动区域,但我找不到任何合适的图库插件。

图像以 ul/li 显示 - 但由于它是显示内联的,它不会让我在每个图像下方放置另一个 div。

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

基本上,如果需要,我想在每张图片下创建一个包含评论空间的部分 - 类似于上面的图片。

任何有关所需代码的提示都会很棒!

【问题讨论】:

    标签: wordpress gallery


    【解决方案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>
    

    【讨论】:

    • 嘿 Sjoerd - 我现在只是在尝试,但技能还没有达到标准,所以需要进行一些研究。任何提示,请在我解决之前将您看到? some-things.net/storage/anna/wordpress/?page_id=49
    • 向左浮动不起作用,因为如果它不适合屏幕,它只会换行。我已经编辑了我的问题以显示解决方案。基本上,它使用 whitespace: no-wrap 来避免换行,并使用 display: inline-block 在同一行上有多个块。可能无法在 IE7 中运行。
    • 太棒了!谢谢!我可以问 - 为什么
    • 我使用了第二个 div style 而不是图像。您可以将此 div 替换为图像。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签