我知道有与此类似的主题，但我认为我的主题有点不同。我正在做的是用数据库中的数据回显 div 中的内容。它们是有序列表元素的一部分。加载前 10 个元素，用户单击加载更多，再加载 10 个。现在它们作为有序列表在一列中...我希望回显的 div 并排排成一行。我想我需要将它保留为有序列表，因为有序列表通过 ajax 调用附加了 html 内容。我尝试使用 jQuery masonry 并成功地将前 10 个 div 并排制作，但接下来的 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>
那是我最初的 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 的宽度？提前致谢!
最佳答案
如果你使用内联显示，它们应该自己排列(我在 li 和内部 div 元素上都试过了)，但我看到你发布的代码中有一些拼写错误，所以我不知道它是否可能导致您的问题。
例如，您没有在内部 div 的内联样式中关闭 ' ...能够在运行时使用 Firebug(或其他浏览器的等效项)编辑它们...
编辑“显示更多”按钮的目的: 如果附加的 html 破坏了您的按钮行为，您可以将其移出容器以使其保持在原位，您甚至可以添加一个父容器以包含自更新 div 和更新程序按钮......这样你应该能够使您的内容保持正确的样式和位置。
关于php - 并排回显多个 div，其中包含来自 DB 的内容和容器 div 的填充宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14814436/