반응형 CSS 질문입니다. 채택완료
https://kin-phinf.pstatic.net/20180328_212/15222408205521dBGL_JPEG/1-1.jpg?type=w620" width="620" />

https://kin-phinf.pstatic.net/20180328_297/1522240855893o8aE5_JPEG/1-3.jpg?type=w620" width="620" />
스타일css 에서 먼가 부족한것같은데
도무지 모르겠어요 어떻게 고쳐야
제가 원하는데로 반응형이 되어서
4개의배너가 고객센터 아래로 내려갈까요?
제소스는 아래 입니다.
#middle { width:100%; width:1300px; margin:0 auto; } .middle-b1 { float:left; width:650px; } .middle-b2 { float:right; width:650px; } .middle-top img { width:100%; max-width:310px; padding-left:5px; } .middle-bottom { padding-top:5px; } .middle-bottom img { width:100%; max-width:310px; padding-left:5px; }
답변 3개
이렇게 한번 해보세요
아래에 @media screen and (max-width: 650px){ 이뜻은
디바이스나 윈도우 가로 사이즈 650px 보다 작을때 적용되라는 뜻이에요.
@media screen and (max-width: 650px){
#middle { width:100%; margin:0 auto; } .middle-b1 { float:left; width:100%; } .middle-b2 { float:right; width:100%; } .middle-b2 img { width: 100%; } .middle-top > a { display: inline-block; width: 50%; } .middle-top > a:first-child { text-align: left; } .middle-top > a:last-child { text-align: right; }
.middle-top img { width:calc(100% - 5px); max-width:100%; padding-left:0px; }
.middle-bottom > a { display: inline-block; width: 50%; } .middle-bottom > a:first-child { text-align: left; } .middle-bottom > a:last-child { text-align: right; }
.middle-bottom img { width:calc(100% - 5px); max-width:100%; padding-left:0px; } }
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인





배너가 1줄로 쭉 나와요 ㅠㅠ