혼돈의 사이드 바 - 사이드 바를 상단 네비게이션 바에 정렬하는 방법

Question

사이드 바를 블로거의 상단 네비게이션 바에 맞추려고합니다. 사이드 바와 바디가 적절하게 조정되도록 믿을 수 없을만큼 간단한 태그가 빠져있을 것이라고 확신합니다.

Answer 1

처음에는

홈 div 위로 div를 이동하십시오. 그런 다음 다음 CSS를 추가하십시오.

#header { 
    overflow: hidden; 
} 

#primary_nav { 
    clear: both; 
} 

#leftbar { 
    margin-top: 52px; 
} 

#single, #home { 
    width: 480px; 
    float: left; 
} 

#central_column { 
    margin-left:0; 
} 

#rightbar { 
    margin-top: 52px; 
} 

또한 집 div 후에 clearboth div를 제거하십시오. 홈

추가 부동의 위에 DIV leftbar

이

Answer 2

1. 이동은 : 홈 DIV
후, 집에 leftbar 및
2. 이 집과 오른쪽 줄
3. 제거 clearboth의 div의를 leftbar 위쪽 여백을 추가 rightbar 왼쪽 여기

Answer 3

는 페이지 레이아웃입니다

* { 
 
    box-sizing: border-box; 
 
} 
 
.sidebar { 
 
    width: 30%; 
 
    float: left; 
 
    padding: 20px; 
 
    height: 250px; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
} 
 
.content { 
 
    width: 70%; 
 
    float: left; 
 
} 
 
.navbar { 
 
    height: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
} 
 
.main { 
 
    height: 200px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    background-color: lightgreen; 
 
} 
 
footer { 
 
    width: 100%; 
 
    height: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background-color: lightblue; 
 
}

<aside class="sidebar">Sidebar</aside> 
 
<div class="content"> 
 
\t <nav class="navbar">Navbar</nav> 
 
\t <div class="main">Main</div> 
 
</div> 
 
<footer>Footer</footer>