css 초급문의 드립니다.
본문
안녕하세요
css 기본을 배우고 있는데요
이상하게 틀어지는 부분이 있어서요
화면으로 보면 아시겠지만 .top-box 영역안에 있는 배경red가 안나오고
안에 있는 div 코드들이 틀어집니다.
float을 쓰면 인식을 못하는거 같은데 왜 이러는 걸까요? ㅜㅜ
float 사용시 높이 값 주는거 말고는 방법이 없나요?
이유 좀 알려주세요~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<style>
div{display:block}
.top-box{width:100%; margin:0 auto; background:red;}
.top-box .nav-btn{ width:20%; float:left;}
.top-box .logo-btn{ width:60%; float:left; }
.top-box .cart-btn{ width:20%; float:left; }
.serch-box{background:#666; text-align:center;}
.navbar{width:100%; background:#999}
.top-notice{width:100%; background:#eee}
</style>
</head>
<body>
<div class="top-box">
<div class="nav-btn"><img src="imgs/cate_btn.jpg" /></div>
<div class="logo-btn"><img src="imgs/logo.jpg" /></div>
<div class="cart-btn"><img src="imgs/cart_btn.jpg" /></div>
</div>
<div class="serch-box">serch-box</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="top-notice">
공지사항
</div>
</body>
</html>
답변 2
높이값을 안주고 하고 싶어요
그럼 수정한 방식대로 해보세요. (위 링크 다시 클릭)
.top-box .nav-btn{ width:20%; display:inline-block;} |
top-box .logo-btn{ width:59%; display:inline-block;} |
.top-box .cart-btn{ width:20%; display:inline-block;} |
이렇게 바꾸면 될거 같네요.
혹시 float으로는 못하나요?
답변을 작성하시기 전에 로그인 해주세요.
