테스트 사이트 - 개발 중인 베타 버전입니다

css가 적용이 안됩니다... 채택완료

그누0817 4년 전 조회 1,175

사이트는 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개

채택된 답변
+20 포인트
exception
4년 전

.mainBann>div {

  display:inline-block; 삭제 및 주석

 float: left;  추가

}

 

하시거나 위에

.mainBann {display: flex;}

 

무조건 inline-block 을 사용하고싶다하시면 width:값을 49% 로

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인