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

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

QA

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

답변 2

본문

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을 알려줘보시면 확인해볼께요

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 129,111
© SIRSOFT
현재 페이지 제일 처음으로