0

我知道有类似的主题，但我认为我的主题有点不同。我正在做的是用数据库中的数据在 div 中回显内容。它们是有序列表元素的一部分。前 10 个项目被加载，用户点击 Load More 和 10 个更多的加载。现在它们作为有序列表在一列中......我希望回显的 div 并排成一行。我认为我需要将其保留为有序列表，因为有序列表通过 ajax 调用附加了 html 内容。我尝试使用 jQuery masonry 并成功地将前 10 个 div 并排制作，但接下来的 10 个没有，因为 DOM 没有刷新……这就是 masonry 的工作原理。所以我想知道我是否可以用 CSS 做到这一点。无论如何......这是我的代码：

<body> 
<div id='container'>
   <ol class="row" id="updates">
<?php
  //query DB for content
?>
   <li> <?php echo "<div style='font-size:12px; position:relative; left:300px;>
        //some other divs with content from DB
        </div><br>"; ?> </li>
        <?php } ?>
   </ol>
<div id="more" style="margin-top: 20px;"> <a  id="<?php echo $id; ?>" 
     class="load_more" href="javascript:void(0);">Show More</a> </div><br/>
</div>
</body>

这是我最初的正文代码。在 ajax 调用的 add_more_content.php 中，格式相同，返回相同的 div 样式并附加到有序列表 id “updates”。这是我为此准备的一些 CSS：

ol.row {
  list-style:none
}
ol.row li {
  position:relative;
  padding:8px;
}
#container {
  width:600px
}
.load_more {
  position:relative;
  left:220px;
  display:block;
}

那么是否可以让回显的 div 并排排列，直到它们填满容器 div 的宽度？提前致谢！

4

1 回答 1

0

如果您使用 display inline，它们应该自己排列（我在 li 和内部 div 元素上都尝试过），但是我看到您发布的代码中有一些拼写错误，所以我不知道它是否会导致您的问题.

例如，您没有关闭内部 div 的内联样式中的 '...在运行时使用 Firebug（或其他浏览器的等效项）编辑它们...

为“显示更多”按钮目的进行编辑：如果附加的 html 破坏了您的按钮行为，您可以将其移出容器以使其保持原位，您甚至可以添加一个父容器以包含自更新 div 和更新按钮......这样你应该能够保持你的内容正确的样式和定位。

于 2013-02-11T15:23:03.580 回答