Php 垂直删除div之间的空间[Bootsrap 3]
我需要删除一些Php 垂直删除div之间的空间[Bootsrap 3],php,jquery,html,css,twitter-bootstrap-3,Php,Jquery,Html,Css,Twitter Bootstrap 3,我需要删除一些div和该div下面的div之间的空格。若列中某个div比另一个div高，则会创建空间 下面是一个例子： 基本上，我需要删除1之间的空格。和4.post和2。和5.以及下面有空间的其他帖子 此外，帖子应按以下顺序排列： 1. 2. 3. 4. 5. 6. 7. ..... 以下是我试图实现的目标： 在4之前明确说明： <div class="col-xs-12 col-md-4 hover"> <!-- post thumbnail --> &l
divdiv之间的空格。若列中某个div比另一个div高，则会创建空间
下面是一个例子：
基本上，我需要删除1之间的空格。和4.
post和2。和5.
以及下面有空间的其他帖子
此外，帖子应按以下顺序排列：
1. 2. 3.
4. 5. 6.
7. .....
以下是我试图实现的目标：
在4
之前明确说明：
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 cssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssolumns: iq_id, iq_pit
anje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
从技术上讲，在您的情况下，必须每三行给出.clear
预览：
对于动态解决方案：
/*启动Praveen的小提琴重置；）*/
*{字体系列：“Segoe UI”；边距：0；填充：0；列表样式：无；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；}
/*结束Praveen的小提琴重置；）*/
.posts{溢出：隐藏；}
.posts.post{border:1px solid#999；padding:10px；文本对齐：中间；宽度：32%；边距：0.5%；float:left；}
.posts.post:n子级（3n+4）：在{清除：两者；显示：块；内容：；}之前
职位#1
职位#2
邮政#3
职位#4
邮政#5
邮政#6
邮政#7
邮政#8
邮政#9
邮政#10
邮政#11
邮政#12
邮政#13
邮政#14
邮政#15
在4
之前明确说明：
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 cssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssolumns: iq_id, iq_pit
anje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP & MySQL]">IQ test [PHP & MySQL]</a></h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
从技术上讲，在您的情况下，必须每三行给出.clear
预览：
对于动态解决方案：
/*启动Praveen的小提琴重置；）*/
*{字体系列：“Segoe UI”；边距：0；填充：0；列表样式：无；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；}
/*结束Praveen的小提琴重置；）*/
.posts{溢出：隐藏；}
.posts.post{border:1px solid#999；padding:10px；文本对齐：中间；宽度：32%；边距：0.5%；float:left；}
.posts.post:n子级（3n+4）：在{清除：两者；显示：块；内容：；}之前
职位#1
职位#2
邮政#3
职位#4
邮政#5
邮政#6
邮政#7
邮政#8
邮政#9
邮政#10
邮政#11
邮政#12
邮政#13
邮政#14
邮政#15
您应该用
包装行：
您还可以将min height属性设置为类似141px的值，以便边框对齐。您应该使用
来包装行：
您还可以将min height属性设置为141px之类的值，以便边框对齐。检查这一点，这似乎是一个有效的解决方案。在显示div（文章）之前，如何使用列并重新组织其内容？检查这一点，看起来是一个有效的解决方案。在显示之前，如何使用列并重新组织div（帖子）的内容？但是，当动态添加帖子时，我如何知道在哪里清除？@VladimirDjukic您需要在服务器端有一个计数器，或者一次只需要输出三行。除此之外，我还有另一个正在工作的解决方案。给我一些时间。在上述情况下，您需要手动更改CSS：（3n+4）。我给+4不包括第一个孩子。但问题是我不知道在哪里清除，因为空格可以放在任何帖子之前。。。例如，如果我在3上添加额外的高度。帖子也会腾出空间：……你是说所有帖子都应该有相同的高度吗？但是当动态添加帖子时，我怎么知道在哪里清除呢？@VladimirDjukic要么你需要在服务器端设置一个计数器，要么你一次只需要输出三行。除此之外，我还有另一个正在工作的解决方案。给我一些时间。在上述情况下，您需要手动更改CSS：（3n+4）。我给+4不包括第一个孩子。但问题是我不知道在哪里清除，因为空格可以放在任何帖子之前。。。例如，如果我在3上添加额外的高度。贴子它也会腾出空间：……你是说所有的贴子都应该有相同的高度吗？我不是说把所有的div都放在一行。但是，您使用的类col-md-4 col-xs-12有特定用途。使用.row对列进行水平分组。默认情况下，行加起来应该是12行，因此在您的情况下，无论在移动设备（col-xs-12）上是什么，它们都将堆叠在一起，在中型和大型设备上是水平行的3行（因为您没有col lg-*）。我链接到了说明如何使用引导网格的文档。我看到了您现在想要完成的任务。Bootstrap无法处理这个问题。试试像这样的砖石框架会有用的，我会试试的。谢谢，我不是说把所有的div都放在一行。但是，您使用的类col-md-4 col-xs-12有特定用途。使用.row对列进行水平分组。默认情况下，行加起来应该是12行，因此在您的情况下，无论在移动设备（col-xs-12）上是什么，它们都将堆叠在一起，在中型和大型设备上是水平行的3行（因为您没有col lg-*）。我链接到了说明如何使用引导网格的文档。我看到了您现在想要完成的任务。Bootstrap无法处理这个问题。试试像这样的砖石框架会有用的，我会试试的。谢谢