OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- |
| 3 Any copyright is dedicated to the Public Domain. |
| 4 http://creativecommons.org/publicdomain/zero/1.0/ |
| 5 --> |
| 6 <html> |
| 7 <head> |
| 8 <style> |
| 9 body { font: 10px sans-serif } |
| 10 .flexContainer { |
| 11 background: orange; |
| 12 width: 70px; |
| 13 padding: 2px; |
| 14 margin-bottom: 2px; |
| 15 } |
| 16 |
| 17 .flexContainer > div:first-child { |
| 18 margin-right: 10px; /* the space between the flex items, in testcase */ |
| 19 } |
| 20 |
| 21 .item1 { |
| 22 display: inline-block; |
| 23 background: lightblue; |
| 24 width: 30px; |
| 25 } |
| 26 .item2 { |
| 27 display: inline-block; |
| 28 background: yellow; |
| 29 width: 30px; |
| 30 } |
| 31 </style> |
| 32 </head> |
| 33 <body> |
| 34 <div class="flexContainer" |
| 35 ><div class="item1">ThisIsALongUnbrokenString</div |
| 36 ><div class="item2">HereIsSomeMoreLongText</div |
| 37 ></div> |
| 38 |
| 39 <div class="flexContainer" |
| 40 ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div |
| 41 ><div class="item2">HereIsSomeMoreLongText</div |
| 42 ></div> |
| 43 |
| 44 <div class="flexContainer" |
| 45 ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div |
| 46 ><div class="item2">HereIsSomeMoreLongText</div |
| 47 ></div> |
| 48 |
| 49 <div class="flexContainer" |
| 50 ><div class="item2">HereIsSomeMoreLongText</div |
| 51 ><div class="item1">ThisIsALongUnbrokenString</div |
| 52 ></div> |
| 53 |
| 54 <div class="flexContainer" |
| 55 ><div class="item2">HereIsSomeMoreLongText</div |
| 56 ><div class="item1">ThisIsALongUnbrokenString</div |
| 57 ></div> |
| 58 |
| 59 <div class="flexContainer" |
| 60 ><div class="item2" style="position:relative">HereIsSomeMoreLongText</div |
| 61 ><div class="item1">ThisIsALongUnbrokenString</div |
| 62 ></div> |
| 63 </body> |
| 64 </html> |
OLD | NEW |