반응형 CSS 질문입니다.

블루블랙 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.03.28 21:47:03 조회 1892 (118.♡.♡.13)

본문

첨부 이미지

1982344717_1522241205.6276.jpg

첨부 이미지

스타일css 에서 먼가 부족한것같은데

도무지 모르겠어요 어떻게 고쳐야

제가 원하는데로 반응형이 되어서

4개의배너가 고객센터 아래로 내려갈까요?

제소스는 아래 입니다.

<style>

#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;
}

</style>

<body>

</body>

#css

답변 3

GroupByEYE 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-03-28 22:09:39 125.♡.♡.117

이렇게 한번 해보세요

아래에 @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;
   }
}