-
위에 처럼 nav 바를 아래 블로그 글과 왼쪽부분을 맞추고 싶은데 ..
이것저것 시도했는데 맞춰지지가 않아요.
제가 .. 뭘 빼먹은걸까요? 아니면 강의뒷 부분에 나오나요??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Document</title>
</head>
<body>
<div class="blog-top">
<nav class="nav">
<ul class="navbar">
<li><a href="#">영화</a></li>
<li><a href="#">맛집</a></li>
<li><a href="#">IT</a></li>
<li><a href="#">컴퓨터</a></li>
</ul>
</nav>
<div class="container">
<div class="blog-content"><div class="blog-name">
<h4 style="margin: 8px">이름</h4>
<p style="margin: 4px">날짜</p>
</div>
<div style="clear: both"></div>
<div style="margin-top: 20px">
<h4 style="margin: 8px">블로그 글</h4>
<p style="margin: 8px">가성비 맛집 발견</p>
</div>
</div><div class="blog-img">
</div>
</div>
</div>
</body>
</html>.container {
width: 800px;
/* display: flex; */
margin-left: auto;
margin-right: auto;
}
/* .blog-top {
display: flex;
align-items: center;
} */.blog-content {
width: 80%;
height: 200px;
background: #eee;
float: left;
}.blog-img {
width: 20%;
height: 200px;
background: yellow;
float: left;
overflow: hidden;
}.blog-profile {
width: 50px;
float: left;
display: block;
margin-top: 10px;
margin-left: 10px;
}
.blog-name {
float: left;
}.navbar {
width: 800px;
text-align: center;
}
.navbar li {
display: inline-block;
text-align: center;
background: #eee;
padding: 10px;
border-radius: 5px;
}
.navbar a {
font-size: 16px;
text-decoration: none;
}
.navbar a,
a:visited,
a:hover,
a:active {
color: inherit;
}
- 답변은 로그인 후 가능합니다.