wiki

Changes

M365/test (view source)

Revision as of 15:14, 2 March 2023

263 bytes removed ,  15:14, 2 March 2023
no edit summary
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}}
Retrieved from "https://wiki.gccollab.ca/Special:MobileDiff/92397"