6,030
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + − + − + − + − + − + − + − − {{#CSS: − <style> − .container { − display: flex; − flex-wrap: wrap; − justify-content: space-between; − } − .column { − flex-basis: calc(33.33% - 20px); − margin-bottom: 20px; − } − .content { − background-color: #f2f2f2; − padding: 20px; − } − @media only screen and (max-width: 768px) { − .column { − flex-basis: 100%; − } − } − </style> − }}
no edit summary
<div class="container">
<div class="container" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
<div class="column">
<div class="column" style="flex-basis: calc(33.33% - 20px); margin-bottom: 20px;">
<div class="content">
<div class="content" style="background-color: #f2f2f2; padding: 20px;">
<h2>Column 1</h2>
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit enim, non ultrices dolor scelerisque id. Integer auctor nunc purus, ac suscipit lectus tristique eu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit enim, non ultrices dolor scelerisque id. Integer auctor nunc purus, ac suscipit lectus tristique eu.</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="column" style="flex-basis: calc(33.33% - 20px); margin-bottom: 20px;">
<div class="content">
<div class="content" style="background-color: #f2f2f2; padding: 20px;">
<h2>Column 2</h2>
<h2>Column 2</h2>
<p>Phasellus accumsan lobortis magna, a ultricies sapien hendrerit id. Vestibulum sed lorem id libero lobortis aliquam in vitae enim. Ut ornare dapibus velit, eget egestas enim bibendum ac.</p>
<p>Phasellus accumsan lobortis magna, a ultricies sapien hendrerit id. Vestibulum sed lorem id libero lobortis aliquam in vitae enim. Ut ornare dapibus velit, eget egestas enim bibendum ac.</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="column" style="flex-basis: calc(33.33% - 20px); margin-bottom: 20px;">
<div class="content">
<div class="content" style="background-color: #f2f2f2; padding: 20px;">
<h2>Column 3</h2>
<h2>Column 3</h2>
<p>Curabitur vel neque vel tortor accumsan bibendum. Nullam a mauris ipsum. Nullam ullamcorper, mauris ac vehicula varius, turpis purus aliquet est, eget pretium odio urna eu enim.</p>
<p>Curabitur vel neque vel tortor accumsan bibendum. Nullam a mauris ipsum. Nullam ullamcorper, mauris ac vehicula varius, turpis purus aliquet est, eget pretium odio urna eu enim.</p>
</div>
</div>
</div>
</div>
</div>
</div>
