This question has been answered by multiple community members. See the first response.
<div class=wrapper> <div class=element>Post 1</div> <div class=element>Post 2</div> <div class=element>Post 3</div> <div class=element>Post 4</div> <div class=element>Post 5</div> </div>
* { box-sizing : border-box; } .wrapper { width : 80%; margin : 1em auto; border : 1px solid #000; padding : 1em; text-align : center; } .element { display : inline-block; border : 1px solid #000; width : 30%; margin : .5em ; padding : 2em; }
.element { display : inline-block; *display : block; zoom : 1; ...rest of the block }
// This one goes to the script.js file or similar $(function(){ $('.wrapper').equalHeights(); });
<script language="javascript" type="text/javascript" src="manager/templates/js/jquery.js"></script> <script language="javascript" type="text/javascript" src="manager/templates/js/jquery.equalheights.js"></script>
$(function(){ $('.wrapper').equalHeights(); });
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="manager/templates/js/jquery.equalheights.js"></script> <script src="manager/templates/js/jquery.js"></script> // Advice, name this scripts.js or app.js
<div class="test"> [[*content]] </div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="manager/templates/js/jquery.equalheights.js"></script> <script src="manager/templates/js/scripts.js"></script>
.test { width : 50%; margin : 1em auto; border : 1px solid #000; padding : 1em; text-align : center; } .element { display : inline-block; border : 1px solid #000; width : 200px; margin : .5em ; padding : 2em; display : inline-block; *display : block; zoom : 1; }
<div class="element"> <h1><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h1> <p>[[+introtext]]</p> <a href="[[~[[+id]]]]">Lees meer</a> </div>