Difference between revisions of "M365/test"

From wiki
Jump to navigation Jump to search
Line 1: Line 1:
<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>
 
{{#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>
 
 
</div>
 
</div>
}}
 

Revision as of 10:33, 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.