해상도에 따른 변화 채택완료
사이트메이크
8년 전
조회 5,024
700px까지 375px의 미디어가 나타나게 하고싶습니다.
(700픽셀 이하부터는 work_img와 work_txt가 슬라이드의 아래로 가게 하고싶습니다.)
고수님들의 도움을 부탁드립니다*_*
현재 노트5와 아이폰6plus에서 화면이 깨집니다.(376px~700px까지 깨짐)
http://i-care.kr" target="_blank">i-care.kr
css
/*index*/</p><p>.latest{width:100%;float:left;}</p><p> </p><p>#main_work ul:after {display:block;visibility:hidden;clear:both;content:""}</p><p>#main_work ul li{background:#fff;letter-spacing:-0.01em}</p><p>#main_work ul li.main_work_1{background:#f8f8f8;}</p><p>#main_work .work_txt span{ display:block;padding:5px 0;color:#808080;line-height:1.5em}</p><p> </p><p>#lt_notice{clear:both}</p><p>#lt_notice,#lt_board,#lt_board2,#lt_gall{margin-top:20px}</p><p> </p><p> </p><p>@media all and (min-width : 601px) {</p><p> </p><p> .col_l_60{width:60%}</p><p> .col_l_40{width:40%}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.col_l_100{width:100%}</p><p> #main_work ul{margin-left:20px}</p><p> #main_work ul li{overflow:hidden}</p><p> #main_work .work_img img{max-width:100px;width:100%;height:auto}</p><p> #lt_board2 .lt{margin-left:20px}</p><p> </p><p>}</p><p>@media (min-width :701px) {</p><p> </p><p> #main_work .work_img{width:35%;height:122px;line-height:112px;display:block;float:left;}</p><p> #main_work .work_txt{width:65%;height:122px;display:block;float:left;}</p><p> #main_work .work_txt span.work_txt_tit{margin-top:20px ;font-weight:bold;font-size:1.25em;color:#111}</p><p> </p><p>}</p><p>@media (min-width:601px) and (max-width :700px) {</p><p> </p><p> #main_work .work_img{width:35%;height:100px;line-height:100px;display:block;float:left;}</p><p> #main_work .work_txt{width:65%;height:100px;display:block;float:left;}</p><p> #main_work .work_txt span.work_txt_tit{line-height:100px;padding:0 ;font-weight:bold;font-size:1.25em;color:#111;}</p><p> #main_work .work_txt span.work_txt_p{display:none}</p><p> </p><p>}</p><p> </p><p>@media all and (max-width : 600px) {</p><p> </p><p> #main_work{margin-top:20px}</p><p> #main_work ul li{float:left;width:33.3%;text-align:center;}</p><p> #main_work .work_img{display:block;}</p><p> #main_work .work_img img{max-width:100px;width:80%;height:auto}</p><p> #main_work .work_txt span.work_txt_p{display:none;}</p><p> #main_work .work_txt span.work_txt_tit{margin:0 0 15px;font-size:1.2em;color:#111;font-weight:bold}</p><p> </p><p>}</p><p>@media all and (max-width : 375px) {</p><p> #container_title{padding-bottom:13px}</p><p> #container {padding:15px 10px}</p><p> #main_work{margin-top:10px}</p><p> #main_work ul li{width:100%;clear:both}</p><p> #main_work .work_txt span.work_txt_p{display:block;padding:0 0 15px}</p><p> #main_work .work_txt span.work_txt_tit{padding-top:0;margin:0;font-size:1.2em;color:#111;font-weight:bold}</p><p> #lt_notice,#lt_board,#lt_board2,#lt_gall{margin-top:10px}</p><p> </p><p>}</p><p>
php
</p><p><div id="main_work" class="col_l_40 latest"></p><p> <ul></p><p> <li></p><p> <a href="/bbs/content.php?co_id=company" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/loca.png" alt="청첩장"></a></p><p> <a href="/bbs/content.php?co_id=company" class="work_txt">
<span><img src="<?php echo G5_THEME_IMG_URL; ?>/name2.png" alt="청첩장"></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="work_txt_p">9월 10일(일) 오후 5시
목화웨딩컨벤션 아모르홀
▷상세보기◁</span></a></p><p> </p><p> </li></p><p> <li class="main_work_1"></p><p> <a href="ㅁㄴㅇㄹ" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/man.png" alt="신랑에게"></a></p><p> <a href="ㅁㄴㅇㄹ" class="work_txt">
<span><img src="<?php echo G5_THEME_IMG_URL; ?>/nameman.png" alt="청첩장"></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="work_txt_p">010-0000-0000
▷통화하기(모바일전용)◁</span></a> </li></p><p> <li></p><p> <a href="ㅁㄴㅇㄹ" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/girl.png" alt="신부에게"></a></p><p> <a href="ㅁㄴㅇㄹ" class="work_txt">
<span><img src="<?php echo G5_THEME_IMG_URL; ?>/namegirl.png" alt="청첩장"></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="work_txt_p">010-0000-0000
▷통화하기(모바일전용)◁</span></a> </li></p><p> </li></p><p> </ul></p><p> </p><p></div></p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
8년 전
자체해결 하였습니다.
</p><p>@media (min-width:601px) and (max-width :700px) {</p><p> </p><p> #main_work .work_img{width:25%;height:110px;line-height:100px;display:block;float:left;}</p><p> #main_work .work_txt{width:75%;height:110px;display:block;float:left;}</p><p> #main_work .work_txt span.work_txt_tit{line-height:100px;padding:0 ;font-weight:bold;font-size:1.25em;color:#111;}</p><p> </p><p> </p><p>}</p><p> </p><p>@media all and (max-width : 600px) {</p><p> </p><p> #main_work{margin-top:20px}</p><p> #main_work ul li{float:left;width:100%;text-align:center;}</p><p> #main_work .work_img{display:block;}</p><p> #main_work .work_img img{max-width:100px;width:80%;height:auto}</p><p> #main_work .work_txt span.work_txt_tit{margin:0 0 15px;font-size:1.2em;color:#111;font-weight:bold}</p><p> </p><p> </p><p>}</p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인