-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
왜 위치가 엉망이 될까요 ㅠㅠ
18.12.11 10:59 작성 조회수 82
0
<!DOCTYPE html>
html,body {
width: 100%
height: 100%;
}
body,h1,h2,h3,input,p{
border:0;
margin:0;
}
body,h1,h2,h3,input,select,button,th,td{
font-family: 'Malgun Gothic',sans-serif;
}
/*style*/
.box_type{
margin: 20px;
border: 4px solid #a8e469;
}
.box_type .inner{
position: relative;
border: 1px solid #418f30;
padding: 0 20px;
}
.box_type p {
margin:10px;
line-height: 1.5em;
}
.box_type .lt, .box_type .rt, .box_type .lb,.box_type .rb
{
position: absolute;
width: 7px;
height: 7px;
background: #fff url(bg_border_corner.gif) no-repeat;
}
.box_type .lt{
left: : -5px;
top: -5px;
background-position: 0 0;
}
.box_type .rt{
right: 5px;
top: 5px;
background-position: 100% 0;
}
.box_type .lb{
right: -5px;
top: -5px;
background-position: 0 100%;
}
.box_type .rb{
right: -5px;
bottom: -5px;
background-position: 100% 100%;
}
내용은 이미지와 다를 수 있습니다.
내용은 이미지와 다를 수 있습니다.
내용은 이미지와 다를 수 있습니다.
답변을 작성해보세요.
0
Dongho Lee
지식공유자2018.12.11
포지션의 개념을 잘 생각해 보시길 바래요... 배경위치와 포지션의 left,right,top,bottom 의 값이 잘못되어있습니다.
.box_type .rt{right: 5px; top: 5px; background-position: 100% 0;}
.box_type .lb{right: -5px; top: -5px; background-position: 0 100%;} 를
.box_type .rt{right: -5px; top: -5px; background-position: 100% 0;}
.box_type .lb{left: -5px; bottom: -5px; background-position: 0 100%;} 으로 고쳐보시기 바랍니다.
답변 1