1
헤더 div에 문제가 있습니다. 비록 내가 css에서 정의 된 것을 가지고 있다고 생각지 않는다하더라도 1000px로 확장 된 것처럼 보인다. 나는 왼쪽에 네비게이션을, 맨 오른쪽에는 로고나 단어를 넣기를 원한다. 어떻게 내부에 위치 시키거나 헤더 div를 수정합니까? 당신의 navbar 100%의 폭이 네비게이션 바에에 float:left 추가 설정div를 헤더 안에 어떻게 배치합니까?
body {
margin: 0;
height: 100%;
}
#container {
width: 100%;
height: auto;
background-color: gray;
}
#header {
width: 75%;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.navbar {
width: 25%;
height: 30px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar li {
float: left;
}
li a {
display: block;
color: red;
padding: 10px;
}
li a:hover {
background-color: #111;
}
.sitename {
float: right;
}
#content {
width: 75%;
height: 600px;
margin-left: auto;
margin-right: auto;
background-color: purple;
}
.box1 {
width: 25%;
height: 300px;
float: left;
background-color: red;
}
.box2 {
width: 25%;
height: 300px;
float: left;
background-color: orange;
}
.box3 {
width: 25%;
height: 300px;
float: left;
background-color: green;
}
#footer {
width: 75%;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li><a href="#home">Home</a>
</li>
<li><a href="#news">News</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
<div class="sitename">Hello</div>
</div>
</div>
<div id="content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div id="footer"></div>
</div>
링크? – JTrixx16
그래서 3 개의 다채로운 div가'# header' div에 삽입되기를 원하십니까? – JTrixx16