Difference between revisions of "M365/test"
< M365
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | + | <div class="container"> | |
| − | < | + | <div class="column"> |
| − | / | + | <div class="content"> |
| − | .container { | + | <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> | |
| − | + | </div> | |
| − | + | </div> | |
| − | } | + | <div class="column"> |
| + | <div class="content"> | ||
| + | <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> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="column"> | ||
| + | <div class="content"> | ||
| + | <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> | ||
| + | </div> | ||
| + | </div> | ||
| + | <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 { | .column { | ||
| − | flex-basis: | + | flex-basis: 100%; |
| − | |||
} | } | ||
| − | + | } | |
| − | + | </style> | |
| − | + | </div> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 09:27, 5 March 2023
Column 1
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.
Column 2
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.
Column 3
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.
<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>
