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

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

php mysql css ajax

Php 用DB中的内容和容器div的填充宽度并排回显多个div,php,mysql,css,ajax,Php,Mysql,Css,Ajax,我知道有类似的话题，但我认为我的有点不同。我所做的是用数据库中的数据回显div中的内容。它们是有序列表元素的一部分。加载前10项，用户单击加载更多项，然后再加载10项。现在，它们作为一个有序列表列在一列中……我希望回显的div在一行中并排出现。我认为我需要将其作为一个有序列表保存，因为有序列表通过ajax调用附加html内容。我尝试使用jQueryMassy并成功地为前10个并排创建了div，但下10个没有，因为DOM没有刷新……这就是Massy的工作原理。所以我想知道我是否可以用CSS来实现这

我知道有类似的话题，但我认为我的有点不同。我所做的是用数据库中的数据回显div中的内容。它们是有序列表元素的一部分。加载前10项，用户单击加载更多项，然后再加载10项。现在，它们作为一个有序列表列在一列中……我希望回显的div在一行中并排出现。我认为我需要将其作为一个有序列表保存，因为有序列表通过ajax调用附加html内容。我尝试使用jQueryMassy并成功地为前10个并排创建了div，但下10个没有，因为DOM没有刷新……这就是Massy的工作原理。所以我想知道我是否可以用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>

那么，是否有可能使回声div并排出现，直到它们填满容器div宽度？提前谢谢

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

例如，您没有在内部div的内联样式中关闭“。。。我还建议使用一个类进行样式设置，这样您就可以确保您的元素共享css，并且您可以在运行时使用Firebug（或其他浏览器的等效工具）对其进行编辑

编辑“显示更多”按钮用途：

如果附加的html破坏了您的按钮行为，您可以将其移出容器，使其保持原位，甚至可以添加一个父容器来包含自更新div和更新程序按钮。。。这样，您应该能够保持内容的正确样式和位置。

使用

float:left，或显示：内联块？我想因为它是一个有序列表，它将在列表中显示它…我以前尝试过float:left，但它不起作用。您是否尝试过在li上显示display:inline？我刚刚完全删除了有序列表，现在我直接添加到container div，它仍然正常工作。我想这将有助于代替列表…现在我需要让它们填充容器div…也许我可以只显示：inline-the-echoked div？请看这个jsbin:the-inline-is-closed…很抱歉，当我在这里放置代码时，这是一种类型。它在我的代码中是封闭的。好的，它可以内联显示li和内部div吗？不：（只是把页面上的一切都搞乱了。我放弃了……我会保持原样……我已经搞乱了很长一段时间，它不起作用了。对不起……不要放弃，也许你只需要改变你的策略，例如避免有序列表和直接使用div……每个dom节点都可以通过ajax调用接受追加，而不仅仅是ols…：）我这样做了…我删除了ols和lis…只是使用了append到container div，我仍然无法得到它。只是在我使用float:left时，它们中的大多数排列正确，但是Show More按钮跳到了页面的中间，没有停留在底部。我正在为load\u More按钮添加css代码…也许有什么原因？
ol.row {
  list-style:none
}
ol.row li {
  position:relative;
  padding:8px;
}
#container {
  width:600px
}
.load_more {
  position:relative;
  left:220px;
  display:block;
}