CSS옆으로 누운 品자형 만들기

2010-07-30

옆으로 누운 品자형 만들기 이런 걸 만들려고 한다.

방안 1 -div를 3개만 쓰는 경우 <!DOCTYPE html> <html> <head> <style> div{ margin:0px; float:left; background:gray; height:20px; }

#first {height:40px;}

#second{ width:140px; background:green; }

#last{ width:140px;

position:relative; left:-140px; top:20px;

background:yellow; } </style> </head> <body>

길다란 가변형 문자열

고정폭/고정높이

고정폭

</body> </html> 문제점 - 부모 element가 보이는 것보다 좀 더-div#last의 폭이 추가된만큼- 커야 한다.

방안 2 -div를 4개 쓰는 경우, 즉 부모 엘리먼트를 하나 두는 경우 <!DOCTYPE html> <html> <head> <style> div{ margin:0px; background:gray; }

#first {height:40px;}

#second , #last{ height:20px; width:140px; background:green; position:absolute; right:0px; }

#second { top:0px; }

#last{ background:yellow; bottom:0px; }

#parent { position:relative; }

</style> </head> <body>

길다란 가변형 문자열

고정폭/고정높이

고정폭

</div> </body> </html>

단점 - 폭이 좁아질 경우, div#first가 가리게 된다. div#parent에 min-width 를 주는 것으로 해결

방안 3 - div를 3개 쓰되, 두 개를 하나 안에 넣는 경우 <!DOCTYPE html> <html> <head> <style> div{ margin:0px; background:gray; position:absolute; }

#second , #last{ height:20px; width:140px; background:green; position:absolute; right:0px; }

#second { top:0px; }

#last{ background:yellow; bottom:0px; }

#parent { height:40px; min-width:220px; }

</style> </head> <body>

길다란 가변형 문자열

고정폭/고정높이

고정폭

</div> </body> </html> 단점 - 최소 폭을 정확히 지정해 주어야 한다. 일단 생각나는 것은 이 셋 정도. 기록용.