450PX로 작업된 포인트 랭킹을 내용이 많아서 사이드 메뉴에서 안보고
PC에서 메인 페이지에서 보니
넘 썰렁해서 가로로 2개 배치하도록 테이블 태그를 썼는데
모바일에서는 옆으로 늘어져 보이네요.
이런 경우 PC에서는 450픽셀이 2개 보이고
모바일에서는 아래로 길게 보이도록 하는
방법 좀 알려주실 분....
현재 450픽셀은 section과 div로 감싸져 있어요
간단한 style 하고 적용방법 부탁드려요
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
2019-07-18 (목) 09:29:35
아래코드 테스트 해보시고 박스안에 넣으세요.
<div style="max-width:1000px;">
<div style="float:left; width:450px; border:1px solid;">
박스1
</div>
<div style="float:left; width:450px; border:1px solid;">
박스2
</div>
</div>
답변에 대한 댓글 2개
스마트스쿨
2019-07-18 (목) 16:35:27
2019-07-18 (목) 18:00:24
tail.php 가 옆에 와서 붙는 문제는 이렇게 해결하면 됩니다.
<div style="max-width:1000px;">
<div style="float:left; width:450px; border:1px solid;">
박스1
</div>
<div style="float:left; width:450px; border:1px solid;">
박스2
</div>
<div style="display:block; clear:both; float:none; width:100%; height:0 !important; overflow:hidden;">
<!-- 부모박스 크기 잡아주는 태그 == floating 해제 -->
</div>
</div>
<div style="max-width:1000px;">
<div style="float:left; width:450px; border:1px solid;">
박스1
</div>
<div style="float:left; width:450px; border:1px solid;">
박스2
</div>
<div style="display:block; clear:both; float:none; width:100%; height:0 !important; overflow:hidden;">
<!-- 부모박스 크기 잡아주는 태그 == floating 해제 -->
</div>
</div>
2019-07-18 (목) 09:21:21
https://aboooks.tistory.com/365
미디어쿼리 사용법입니다.
답변을 작성하려면 로그인이 필요합니다.
잘 분리되었는데
아래 tail.php 가 옆으로 와서 붙어버려서
편법으로 다시 정렬해서 아래에 붙였네요.
css 가 너무 어려워요.. php 코딩이 쉽지요.
아무튼 덕분에 해결은 했습니다. 감사합니다.