<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> * { margin : 0; padding : 0; } .outer { height : 100px; margin-bottom : 10px; } .left { background : tomato; height : 100px; } .right { background : gold; height : 100px; } .outer1 .left { width : 200px; float : left; } .outer1 .right { width : auto; margin-left : 200px; } .outer2 { display : flex; } .outer2 .left { flex-grow : 0; flex-shrink : 0; flex-basis : 200px; } .outer2 .right { flex : auto; } .outer3 { position : relative; } .outer3 .left { position : absolute; width : 200px; } .outer3 .right { margin-left : 200px; } .outer4 { position : relative; } .outer4 .left { width : 200px; } .outer4 .right { position : absolute; top : 0; left : 200px; right : 0; } </ style> </ head> < body> < divclass = " outer outer1" > < pclass = " left" > </ p> < pclass = " right" > </ p> </ div> < divclass = " outer outer2" > < pclass = " left" > </ p> < pclass = " right" > </ p> </ div> < divclass = " outer outer3" > < pclass = " left" > </ p> < pclass = " right" > </ p> </ div> < divclass = " outer outer4" > < pclass = " left" > </ p> < pclass = " right" > </ p> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> * { margin : 0; padding : 0; } .outer { margin-top : 40px; } .left { height : 20px; background-color : aqua; } .center { height : 20px; background-color : brown; } .right { height : 20px; background-color : blue; } .outer1 { display : flex; } .outer1 .left { width : 200px; flex-grow : 0; flex-shrink : 1; flex-basis : auto; } .outer1 .center { width : auto; flex : 1 1 auto; } .outer1 .right { width : 200px; flex : none; } .outer2 { position : relative; } .outer2 .left { position : absolute; width : 200px; } .outer2 .right { position : absolute; width : 200px; top : 0; right : 0; } .outer2 .center { margin-left : 200px; margin-right : 200px; } .outer3 .left { float : left; width : 200px; } .outer3 .right { float : right; width : 200px; } .outer3 .center { margin : 0 200px 0 200px; } .outer4 { padding : 0 200px 0 100px; } .outer4 .center { width : 100%; float : left; } .outer4 .left { width : 100px; float : left; margin-left : -100%; position : relative; left : -100px; } .outer4 .right { width : 200px; float : left; margin-left : -200px; position : relative; left : 200px; } .outer5 { margin-top : 100px; } .outer5 .center { width : 100%; float : left; } .outer5 .middle { margin : 0 200px 0 100px; } .outer5 .left { width : 100px; float : left; margin-left : -100%; } .outer5 .right { width : 200px; float : left; margin-left : -200px; } </ style> </ head> < body> < divclass = " outer outer1" > < pclass = " left" > </ p> < pclass = " center" > </ p> < pclass = " right" > </ p> </ div> < divclass = " outer outer2" > < pclass = " left" > </ p> < pclass = " center" > </ p> < pclass = " right" > </ p> </ div> < divclass = " outer outer3" > < pclass = " left" > </ p> < pclass = " right" > </ p> < pclass = " center" > </ p> </ div> < divclass = " outer outer4" > < pclass = " center" > </ p> < pclass = " left" > </ p> < pclass = " right" > </ p> </ div> < divclass = " outer outer5" > < divclass = " center" > < pclass = " middle" > </ p> </ div> < pclass = " left" > </ p> < pclass = " right" > </ p> </ div> </ body> </ html>
<! DOCTYPE html > < html> < head> < title> </ title> < styletype = " text/css" > .triangle { height : 0px; width : 0px; border-top : 200px solid red; border-left : 400px solid blue; border-bottom : 200px solid green; border-right : 400px solid transparent; } .box1, .box2, .box3, .box4 { height : 0px; width : 0px; border-style : solid; margin : 10px; } .box1 { border-width : 100px; border-color : tomato transparent transparent transparent; } .box2 { border-width : 100px 173px; border-color : transparent tomato transparent transparent; } .box3 { border-width : 100px 80px; border-color : transparent transparent tomato transparent; } .box4 { border-width : 100px 90px 80px 70px; border-color : transparent transparent transparent tomato; }
</ style> </ head> < body> < divclass = " triangle" > </ div> < pclass = " box1" > </ p> < pclass = " box2" > </ p> < pclass = " box3" > </ p> < pclass = " box4" > </ p> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> .parent { height : 200px; width : 200px; margin-top : 30px; background-color : aqua; } .child { width : 50px; height : 50px; background-color : black; } .parent1 { position : relative; } .child1 { position : absolute; top : 0; left : 0; right : 0; bottom : 0; margin : auto; } .parent2 { position : relative; } .child2 { position : absolute; top : 50%; left : 50%; transform : translate ( -50%, -50%) ; } .parent3 { display : flex; justify-content : center; align-items : center; } .child3 { } .parent4 { position : relative; } .child4 { position : absolute; top : 50%; left : 50%; margin-top : -25px; margin-left : -25px; } </ style> </ head> < body> < divclass = " parent parent1" > < divclass = " child child1" > </ div> </ div> < divclass = " parent parent2" > < divclass = " child child2" > </ div> </ div> < divclass = " parent parent3" > < divclass = " child child3" > </ div> </ div> < divclass = " parent parent4" > < divclass = " child child4" > </ div> </ div> </ body> </ html>
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < style> .square1 { width : 10%; height : 10vw; background : red; } .square2 { width : 20%; height : 0; padding-top : 20%; background : orange; } .square3 { width : 30%; overflow : hidden; background : yellow; } .square3::after { content : '' ; display : block; margin-top : 100%; }
</ style> </ head> < body> < pclass = " square1" > </ p> < pclass = " square2" > </ p> < pclass = " square3" > </ p> </ body> </ html> 
