css가 적용이 안됩니다...
관련링크
본문
사이트는 www.nclasha.com 이고
부분은 mainBann 입니다
html은
<div class="mainBann">
<div>
<a href="http://www.nclasha.co.kr/product/%EC%97%94%ED%81%B4%EB%9D%BC%EC%83%A4-new-%EB%B0%9C%ED%9A%A8%ED%95%B4%EC%82%BC-%ED%81%AC%EB%A6%BC-50g/11/category/1/display/2/">구매하기</a>
</div>
<div>
<a href="http://www.nclasha.co.kr/product/%EC%97%94%ED%81%B4%EB%9D%BC%EC%83%A4-new-%EB%B0%9C%ED%9A%A8%ED%95%B4%EC%82%BC-%ED%81%AC%EB%A6%BC-50g/11/category/1/display/2/">구매하기</a>
</div>
</div>
이거고
css는
/*메인 풀사이즈 배너*/
.mainBann {
width:100%;
height:310px;
margin-bottom:100px;
background:#e7e7e9 url('/web/upload/images/mainbann.jpg') no-repeat center;
}
.mainBann>div {
width:50%;
position: relative;
color:#676464;
font-size:14px;
display: inline;
}
.mainBann>div>p:first-child {
padding:75px 0 10px;
font-size:30px;
letter-spacing:-0.05em;
}
.mainBann>div span a {
display:inline;
text-decoration:underline;
font-weight:900;
color:#676464;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}
.mainBann>div span a:hover { color:#202020; }
/*메인 풀사이즈 배너, 메인 이미지 추출*/
.mainBann>div,
.mainevent {
width:50%;
}
}
이렇게 되어있습니다
다름이아니라
이렇게 구매하기가 1단 2단으로 연속으로 되어있는데
아래사진처럼 50%로 두개로 나눠저서 적용하고 싶은데
css에서 mainBann의 display가 inline-block로 되어있어서 그런거 같은데 다른걸로 바꿔서 저장해도 바뀌질 않습니다
어떻게 수정을 해야할까요...?
답변 1
.mainBann>div {
display:inline-block; 삭제 및 주석
float: left; 추가
}
하시거나 위에
.mainBann {display: flex;}
무조건 inline-block 을 사용하고싶다하시면 width:값을 49% 로