当前位置：文江博客话题详情

如何在 ul/li 中设置评论部分的样式

发布于 2024-09-07 02:40:06 字数 515 浏览 1 评论 0原文

我该如何在该画廊的每张照片下添加评论部分？（您可以在这里查看我希望做的事情的图片：-不会让我发布链接，因为我是新成员...... 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

基本上，我想在每张图片下创建一个部分，其中包含需要的评论空间 - 就像上图一样。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过度放纵 2024-09-14 02:40:06

将图像和内容放在一个 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>

Put the image and the content in a div, and ~~float all these divs to the left.~~ use inline-block as display and whitespace: 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>

回复收藏 0 原文

~没有更多了~