Question

我知道有类似的主题，但我认为我的有点不同。我正在做的是用数据库中的数据回显div中的内容。它们是有序列表元素的一部分。加载前10个项目，用户单击Load More和10个加载。现在它们在一列中作为有序列表......我希望回显的div在一行中并排放置。我想我需要将它保存为有序列表，因为有序列表通过ajax调用附加了html内容。我尝试使用jQuery砌体并成功地将div与前10个并排，但接下来的10个没有因为DOM没有刷新......这就是砌体的工作原理。所以我想知道我是否可以用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宽度？提前谢谢！

Answer 1

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

例如，你没有关闭内部div的内联样式......我还建议使用一个类来设置样式，这样你就可以确定你的元素分享他们的CSS了，你会能够使用Firebug（或其他浏览器等效的）在运行时编辑它们......

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

用DB中的内容和容器div的填充宽度并排回显多个div

1 个答案: