Equal height
Looking for WET v3.1?
As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.
Purpose
Equalize the height of elements on the same baseline.
Example
Short container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Medium container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Long container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.
Short container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Medium container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Long container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.
Short container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Medium container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Long container
Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.
Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.
Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.
Code
HTML
<div class="wb-eqht">
<section>
<h3>Short container</h3>
...
</section>
<section>
<h3>Medium container</h3>
...
</section>
<section>
<h3>Long container</h3>
...
</section>
</div>
<div class="wb-eqht">
<section>
<h3>Short container</h3>
...
</section>
<section>
<h3>Medium container</h3>
...
</section>
<section>
<h3>Long container</h3>
...
</section>
<section>
<h3>Short container</h3>
...
</section>
<section>
<h3>Medium container</h3>
...
</section>
<section>
<h3>Long container</h3>
...
</section>
</div>
CSS
.wb-eqht section {
display: inline-block;
margin-bottom: 15px;
padding: 15px;
width: 100%;
}
@media (min-width: 768px) {
.wb-eqht section {
width: 49%;
}
}
@media (min-width: 1200px) {
.wb-eqht section {
width: 33%;
}
}
Nested Example
Column 1
Column 1
- test
- test
- test
- test
- test
Column 2
Column 2
- test
- test
- test
- test
- test
- test
- test
- test
- test
Column 3
Column 3
- test
- test
Column 1
Column 1
- test
- test
- test
- test
- test
- Date modified: