垂直删除div之间的空间[Bootsrap 3]
我需要删除某些div和div below that div之间的空格。如果某个div比列中的其他div更高，则会创建空格。
以下是示例：
http://www.bootply.com/Hc2aO5o4bG
基本上，我需要删除1. and 4.帖子和2. and 5.之间的空格，以及每个其他帖子下面有空格的空格。
也应按此顺序发布：
1. 2. 3.
4. 5. 6.
7. .....
这是我想要完成的事情：
2 个答案:
答案 0 :(得分：2)
在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>
并提供此CSS
.clear {
clear: both;
}
从技术上讲，在您的情况下，您必须每三行提供一次.clear！
预览：http://www.bootply.com/uC3qzah3f9
对于动态解决方案：
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
.posts {overflow: hidden;}
.posts .post {border: 1px solid #999; padding: 10px; text-align: center; width: 32%; margin: 0.5%; float: left;}
.posts .post:nth-child(3n+4):before {clear: both; display: block; content: " ";}<div class="posts">
<div class="post">Post #1</div>
<div class="post">Post #2</div>
<div class="post">Post #3</div>
<div class="post">Post #4</div>
<div class="post">Post #5</div>
<div class="post">Post #6</div>
<div class="post">Post #7</div>
<div class="post">Post #8</div>
<div class="post">Post #9</div>
<div class="post">Post #10</div>
<div class="post">Post #11</div>
<div class="post">Post #12</div>
<div class="post">Post #13</div>
<div class="post">Post #14</div>
<div class="post">Post #15</div>
</div>
在上述情况下，您需要手动更改CSS：(3n + 4)。我让+ 4不包括第一个孩子。
答案 1 :(得分：2)
您应该使用<div class="row"></div>：http://getbootstrap.com/css/#grid
您还可以将min-height属性设置为141px，以便边框对齐。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？