css pc 버전과 모바일 버전 틀어지는데 해결책좀 알려주세요

css pc 버전과 모바일 버전 틀어지는데 해결책좀 알려주세요

QA

css pc 버전과 모바일 버전 틀어지는데 해결책좀 알려주세요

본문

css pc 버전과 모바일 버전 틀어지는데 해결책좀 알려주세요


0699f9808ea0ab197ad135ec0354ef4a_1505272447_7494.jpg


좌측 이미지 pc버전, 우측 이미지 모바일 버젼 화면을 띄우고 보면

제품의 특징 | 제품의 용도 사이 행간이 틀어지게 됩니다.

css 아무리 이리 저리 해봐도 답을 못찾겠네요 ㅠ ㅠ

고님들의 도움의 손길이 필요 합니다.


스타일 시트 시작.



html 시작


#tablewrap {
width: 800px;
height: auto;

}

.test {
    text-align:center;
    font-size:12px;                       /* 글자 크기는 16픽셀로 합니다. */
    line-height:22px;                     /* 글자 높이 22픽셀로 합니다. */
    color:#000000;                        /* 글자 색은 # 000000 로 합니다. */
    font-weight:bold;                     /* 글자의 두께를 두껍게 합니다 */
    }


.paperboxtop {
    width: 600px;                         /*전체 폭지정*/
    min-height:24px;                         /* 높이지정 */
    background-color:#2782f2;
    border: 1px solid gray;              /* 두께 1픽셀의 회색선으로 테두리를 나타 냅니다. */
    margin: 20px auto 0px auto;           /*  윗쪽 여백을 20픽셀주고 가운데 정렬 */
    text-align:center;                    /* 태그안에 속해있는 모든 문자들을 가운데 정렬 */
    padding:10px 10px 10px 10px;          /* 위 오른쪽 아래 왼쪽 */
    font-size:16px;                       /* 글자 크기는 16픽셀로 합니다. */
    line-height:22px;                     /* 글자 높이 22픽셀로 합니다. */
    color:#ffffff;                        /* 글자 색은 # ffffff 로 합니다. */
    font-weight:bold;                     /* 글자의 두께를 두껍게 합니다 */
    }
   

    .paperbox1 {
     
    width: 170px;                         /*전체 폭지정*/
    background-color:#ffffff;
    border: 1px solid #dbdbdb;              /* 두께 1픽셀의 회색선으로 테두리를 나타 냅니다. */
    text-align:center;                      /* 태그안에 속해있는 모든 문자들을 가운데 정렬 */
    margin: 3px 0px 0px 89px;               /*  윗쪽 여백을 6픽셀주고 왼쪽 여백 89px */
    padding:10px 10px 10px 10px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
     font-size:14px;                       /* 글자 크기는 16픽셀로 합니다. */
     line-height:22px;                     /* 글자 높이 22픽셀로 합니다. */
    float: left;
    }
   
    .paperbox2{
    width: 406px;                         /*전체 폭지정*/
    background-color:#ffffff;
    border: 1px solid #dbdbdb;              /* 두께 1픽셀의 회색선으로 테두리를 나타 냅니다. */
    text-align:center;                      /* 태그안에 속해있는 모든 문자들을 가운데 정렬 */   
    margin: 3px 0px 0px 284px;               /*  윗쪽 여백을 6픽셀주고 왼쪽 여백 89px */
    padding:10px 10px 10px 10px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
     font-size:14px;                       /* 글자 크기는 16픽셀로 합니다. */
     line-height:22px;                     /* 글자 높이 22픽셀로 합니다. */
     float: light;
    }
   
   
      .paperbox3 {
     
    width:170px;                         /*전체 폭지정*/
    height:44px;                         /* 높이지정 */
    background-color:#ffffff;
    border: 1px solid #dbdbdb;              /* 두께 1픽셀의 회색선으로 테두리를 나타 냅니다. */
   
   
    margin: 3px 0px 0px 89px;               /*  윗쪽 여백을 6픽셀주고 왼쪽 여백 89px */
    padding:10px 10px 10px 10px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
   
    text-align:center;                      /* 태그안에 속해있는 모든 문자들을 가운데 정렬 */
     font-size:14px;                       /* 글자 크기는 16픽셀로 합니다. */
     line-height:22px;                     /* 글자 높이 22픽셀로 합니다. */
    float: left;
    }
   
      .paperbox4 {
     
    width:170px;                         /*전체 폭지정*/
    height:196px;                         /* 높이지정 */
    background-color:#ffffff;
    border: 1px solid #dbdbdb;              /* 두께 1픽셀의 회색선으로 테두리를 나타 냅니다. */
   
   
    margin: 3px 0px 0px 89px;               /*  윗쪽 여백을 6픽셀주고 왼쪽 여백 89px */
    padding:10px 10px 10px 10px;            /* div 박스 내 여백 지정 위 오른쪽 아래 왼쪽 */
   
    text-align:center;                      /* 태그안에 속해있는 모든 문자들을 가운데 정렬 */
     font-size:14px;                       /* 글자 크기는 16픽셀로 합니다. */
     line-height:22px;                     /* 글자 높이 22픽셀로 합니다. */
    float: left;
    }


스타일 시트 끝!!





<div id="tablewrap">

<div class="test">1. 배송방법 : 택배 배송을 원칙으로 합니다.
<br>(입금 완료 후 1일 ~ 2일 소요)<br>

<p><strong>2. 배 송 비 : 무료배송.<br></strong></p>

--------------------------------------------------------------------


</div>

<div class="paperboxtop">제품 사양</div>


<div class="paperbox1">모델명</div>
<div class="paperbox2">내 용</div>

<div class="paperbox1">규 격</div>
<div class="paperbox2">17인치(432mm X 30mm)</div>

<div class="paperbox1">제품 판매 단위</div>
<div class="paperbox2">1 Roll</div>


<div class="paperbox3"> 적용 장비및 사용 용도</div>
<div class="paperbox2">  - HP. EPSON. CANON등...모든 잉크젯프린터,<br>
                           잉크젯플로터(대형프린터)에 사용이 가능합니다.
                           </div>
                                                   
<div class="paperbox4"><br><br><br>제품의 특징</div>
<div class="paperbox2"> - 실사출력은 기본이고 최상의 해상도는 물론 내구성,<br>
                          내수성이 강하여 옥내,옥외 어디에서도 다양하게<br>
                          활용되고 있다.<p></p>
                          특히, 출력물의 화질이 뛰어나서 사진인화지 대용으로<br>
                          사용하고,점착제품으로서 시공이 쉽습니다.<br>
                          내구성이 뛰어나며,그래픽 실사연출에 최적의 제품이다.<p></p>
                         
                          -  내구성이 뛰어난 폴리에스테르 필름 재질.<p></p>
</div>

<div class="paperbox3"> 적용의 용도</div>
<div class="paperbox2">   - 조명용,옥외,옥내외 디스플레이,고품질 그래픽 출력작업,<br>
    다양한 용도의 제품입니다.</div>

</div><!---아이디 tablewrap 구릅 끝-->



html 끝!!
 

이 질문에 댓글 쓰기 :

답변 2

음.. 이상하네요


올려주신 내용대로 


http://deb.kr/test/css1.php 

여기에 구현해서 


PC/ 모바일 둘다 확인해봤는데


안깨집니다.


깨진다고하는 URL을 알려줘보시면 확인해볼께요

답변을 작성하시기 전에 로그인 해주세요.
전체 141
QA 내용 검색
filter #div ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT