Difference between revisions of "M365/test"

From wiki
Jump to navigation Jump to search
Line 1: Line 1:
<div class="left">
+
<style type="text/css">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
+
.flexbox {
</div>
+
    display: -ms-flex;
<div class="right">
+
    display: -webkit-flex;
     <ul>
+
     display: flex;
        <li>The columns are in the right order semantically</li>
+
     width: 100%;
        <li>You don't have to float both columns</li>
+
}
        <li>You don't get any odd wrapping behaviour</li>
 
        <li>The columns are fluid to the available page...</li>
 
        <li>They don't have to be fluid to the available page - but any container!</li>
 
     </ul>
 
</div>
 
  
 
.left {
 
.left {
     background-color: Red;
+
     background: #a0ffa0;
     float: left;
+
     min-width: 75px;
     width: 50%;
+
     flex-grow: 0;
 
}
 
}
  
 
.right {
 
.right {
     background-color: Aqua;
+
     background: #a0a0ff;
     margin-left: 50%;
+
     flex-grow: 1;
 
}
 
}
 +
</style>
 +
 +
...
 +
 +
<div class="flexbox">
 +
    <div class="left">AAA</div>
 +
    <div class="right">BBB</div>
 +
</div>
  
 
{{M365}}
 
{{M365}}

Revision as of 15:14, 2 March 2023

<style type="text/css"> .flexbox {

   display: -ms-flex;
   display: -webkit-flex;
   display: flex;
   width: 100%;

}

.left {

   background: #a0ffa0;
   min-width: 75px;
   flex-grow: 0;

}

.right {

   background: #a0a0ff;
   flex-grow: 1;

} </style>

...

AAA
BBB


"M365"
Ces pages génèrent leur contenu en fonction de vos préférences linguistiques. Pour modifier votre préférence, veuillez changer la langue sélectionnée dans le coin supérieur droit de la page.

These pages generate their content based on your language preference. To change your preference, please change the language selected in the top right corner of the page.

"M365 Home

"M365 Accuel