|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + <body> |
| 4 | + <div style="width: 500px; border: solid green"> |
| 5 | + <span style="float:none; margin: 0; color: purple; border: solid; width: 100px; display: inline-block;">Float:none div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span> |
| 6 | + <span style="float:right; margin: 0;color: red; border: solid; width: 100px; display: inline-block;">Float:right div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span> |
| 7 | + <span style="float:left; margin: 0; color: blue; border: solid; width: 100px; display: inline-block;">Float:left div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span> |
| 8 | + <p style="margin: 0; text-align: center;">Text (paragraph) text-align CENTER - and some more text for visualization. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> |
| 9 | + </div> |
| 10 | + <br> |
| 11 | + <div style="width: 700px; border: solid green"> |
| 12 | + <p style="margin: 0; text-align: right;"> |
| 13 | + Text (paragraph) text-align RIGHT - and some more text for visualization. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <span style="float:left; margin: 0; color: blue; border: solid; width: 100px; display: inline-block;">Float:left div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
| 14 | + <span style="float:right; margin: 0; color: red; border: solid; width: 100px; display: inline-block;">Float:right div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span> |
| 15 | + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 16 | + </div> |
| 17 | + <br> |
| 18 | + <div style="width: 500px; border: solid green"> |
| 19 | + <p style="margin: 0; text-align: left;">Text (paragraph) text-align LEFT - and some more text for visualization. Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="float:left; margin: 0; color: blue; border: solid; width: 100px; display: inline-block;">Float:left div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span> |
| 20 | + <span style="float:right; margin: 0; color: red;border: solid; width: 100px; display: inline-block;">Float:right div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 21 | + </div> |
| 22 | + <br> |
| 23 | + |
| 24 | + <div style="width: 700px; border: solid green"> |
| 25 | + <p style="margin: 0; text-align: center;">Text (paragraph) text-align CENTER - andsomemoretextforvisualization. Loremipsum dolorsitamet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| 26 | + <span style="float:left; margin: 0; color: blue; border: solid; width: 100px; display: inline-block;">Float:left div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| 27 | + <span style="float:right; margin: 0; color: red; border: solid; width: 100px; display: inline-block;">Float:right div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
| 28 | + <span style="float:none; margin: 0; color: purple; background-color: gray; border: solid; width: 100px; display: inline-block;">Float:none div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 29 | + </div> |
| 30 | + <br> |
| 31 | + |
| 32 | + <div style="width: 700px; border: solid green"> |
| 33 | + <p style="margin: 0; text-align: justify;">Text (paragraph) text-align JUSTIFY - text should be placed in more than one line for justify visualization. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| 34 | + <span style="float:left; margin: 0; color: blue; border: solid; width: 100px; display: inline-block;">Float:left div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| 35 | + <span style="float:right; margin: 0; color: red; border: solid; width: 100px; display: inline-block;">Float:right div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
| 36 | + <span style="float:none; margin: 0; color: purple; background-color: gray; border: solid; width: 100px; display: inline-block;">Float:none div width 100 px Test aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa</span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 37 | + </div> |
| 38 | + </body> |
| 39 | +</html> |
0 commit comments