css pc 버전과 모바일 버전 틀어지는데 해결책좀 알려주세요
본문
css pc 버전과 모바일 버전 틀어지는데 해결책좀 알려주세요
좌측 이미지 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
음.. 이상하네요
올려주신 내용대로
여기에 구현해서
PC/ 모바일 둘다 확인해봤는데
안깨집니다.
깨진다고하는 URL을 알려줘보시면 확인해볼께요