스타일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>
<div id="middle">
<div class="middle-b1">
<a href="#"><img src="img/customer.jpg" alt="" /></a>
</div>
<div class="middle-b2">
<div class="middle-top">
<a href="#"><img src="img/banner-middle1.jpg" alt="" /></a>
<a href="#"><img src="img/banner-middle2.jpg" alt="" /></a>
</div>
<div class="middle-bottom">
<a href="#"><img src="img/banner-middle3.jpg" alt="" /></a>
<a href="#"><img src="img/banner-middle4.jpg" alt="" /></a>
</div>
</div>
</div>
</body>
답변 3개 / 댓글 1개
이렇게 한번 해보세요
아래에 @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줄로 쭉 나와요 ㅠㅠ