그래프 구현 중 position:absolute 주면 그래프가 사라집니다
큐티베이비
수평 그래프 부분을 꾸며보고 있는데요..
퍼센트 표시 영역(15%, 25% 등)을막대 그래프 오른쪽으로 보내려고 position:absolute를 주면 오른쪽 그림과 같이 막대가 사라집니다.
아무리 봐도 원인을 모르겠네요.
뭘 잘 못했는지 좀 알려주세요~
[style]
* {font-size:12px; margin:0; padding:0;}
ul {list-style:none;}
.graphArea {width:275px; height:200px; font-size:11px; letter-spacing:-1px; margin:20px;}
.hGraph {padding:0 20px 20px 50px; border: 1px solid green;}
.hGraph .gLabel {width:40px; display:inline-block; margin:0 0 0 -43px; position:absolute; text-align:right;}
.hGraph .gBar {display:inline-block; height:100%; position:relative; background-color:#ccc;}
.hGraph .gBar span {width:30px; display:inline-block; position:absolute; top:0; right:0;}
.hGraph ul {border:1px solid #ccc; border-right:0; border-top:0; padding-top:1px;}
.hGraph li {position:relative; line-height:20px; margin:15px 0; vertical-align:top; white-space:nowrap;}
[html]
div class=graphArea
div class=hGraph
ul
lispan class=gLabel특급/spanspan class=gBar style=width:15%span15%/span/span/li
lispan class=gLabel고급/spanspan class=gBar style=width:25%span25%/span/span/li
lispan class=gLabel중급/spanspan class=gBar style=width:35%span35%/span/span/li
lispan class=gLabel초급/spanspan class=gBar style=width:100%span25%/span/span/li
/ul
/div
/div
-
흰꽃
height 100% 주고는 헤매고 있었군요..감사합니다.
-
메이
.hGraph .gBar에 height:100%를 줫는데
부모에 height값이없으므로 100% 줘바짜 0 이라는소리지요.,
.hGraph li에 height:값을주면됨 -
참
감사합니다.
-
민G
부모 hGraph .gBar { } 가 display:inline-block일때 자식(텍스트, 엘리먼트, 이미지)가 없을경우 넓이값을 찾을수없습니다.
hGraph .gBar .span { }에 absolute를 주셨기때문에 부모요소의 넓이를 찾아주지못해서 발생하는문제이므로.
(absolute는 부모의 넓이 높이에 영향을 주지않습니다.)
hGraph .gBar .span 을 absolute속성을 제거하시거나
hGraph .gBar 에 넓이값 혹은 dis