logical-values-float-clear-1-ref.html (1394B)
1 <!DOCTYPE html> 2 <style> 3 body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; } 4 div > div { margin: .5em; padding: .5em; background: yellow; } 5 .left { float: left; } 6 .right { float: right; } 7 .ltr { direction: ltr; } 8 .rtl { direction: rtl; } 9 </style> 10 11 <body> 12 <div class="ltr"> 13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 14 Phasellus efficitur nisi at sollicitudin eleifend. 15 <div class="left">Inline-start</div> 16 Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. 17 Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, 18 ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. 19 <div class="right">Inline-end</div> 20 Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. 21 Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. 22 Aliquam erat volutpat. 23 </div> 24 25 <div class="rtl"> 26 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 27 Phasellus efficitur nisi at sollicitudin eleifend. 28 <div class="right">Inline-start</div> 29 Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. 30 Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, 31 ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. 32 <div class="left">Inline-end</div> 33 Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. 34 Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. 35 Aliquam erat volutpat. 36 </div>