html - Ordering of floated elements -
i've encountered issue floating element don't quite understand. it's easier show problem explain, i've created 2 examples demonstrate how output differs depending on order place elements floated.
example #1
html:
<body> <div class="float-right"> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit. nunc vulputate metus velit, @ mattis orci consectetur sit down amet. etiam tellus risus, ornare @ tellus sit down amet, suscipit aliquet sapien. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; sed congue odio non massa vehicula convallis. nullam maximus diam european union lectus pellentesque, et imperdiet erat fringilla.</p> </div> <figure> <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="tmnt!" alt="tmnt 90's logo" /> <figcaption>tmnt logo 90's</figcaption> </figure> </body> css
div { width: 300px; } img { height: 200px; width: 200px; } .float-right { float: right; } figure { height: 200px; width: 200px; border: 1px solid black; } output: http://jsfiddle.net/4yw8ga68/3/embedded/result/
here div containing paragraph floated right. div followed figure element containing image , caption. in output, can see div floated way right, , result, image placed @ top left of page.
example #2
html:
<body> <figure> <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="tmnt!" alt="tmnt 90's logo" /> <figcaption>tmnt logo 90's</figcaption> </figure> <div class="float-right"> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit. nunc vulputate metus velit, @ mattis orci consectetur sit down amet. etiam tellus risus, ornare @ tellus sit down amet, suscipit aliquet sapien. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; sed congue odio non massa vehicula convallis. nullam maximus diam european union lectus pellentesque, et imperdiet erat fringilla.</p> </div> </body> css
div { width: 300px; } img { height: 200px; width: 200px; } .float-right { float: right; } figure { height: 200px; width: 200px; border: 1px solid black; } output: http://jsfiddle.net/4yw8ga68/5/embedded/result/
this code same first, floated div placed after figure , image. in example, div appears floated right, bumped downwards because of image.
my question is, why output different in sec example? expect output same first example, considering image , figure 200px wide , there still plenty of room floated div float way right , top of page.
any help appreciated. give thanks you!
this because when first element floated, whatever element follows after fills space.
however, if sec element floated not have effect on first element, since not come after sec one.
if want accomplish same effect first code maintain sec html structure, need add together float property <figure> element, such:
figure { height: 200px; width: 200px; border: 1px solid black; float: left; } here jsfiddle: http://jsfiddle.net/4yw8ga68/6/
html css
No comments:
Post a Comment