• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

왜 위치가 엉망이 될까요 ㅠㅠ

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%;

}

내용은 이미지와 다를 수 있습니다.

내용은 이미지와 다를 수 있습니다.

내용은 이미지와 다를 수 있습니다.

답변 1

답변을 작성해보세요.

0

포지션의 개념을 잘 생각해 보시길 바래요... 배경위치와 포지션의 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%;} 으로 고쳐보시기 바랍니다.