콘텐츠 아래에 푸터를 푸시하고 인라인으로 표시하는 방법은 무엇입니까?

Question

이 질문은 duplicate이지만 단 하나의 대답 (받아 들여지지 않았거나 등급이 매겨지지 않음)이 있었으며 토론이 거의 없었으며 문제가 해결되면 OP는 다시보고하지 않았습니다. 내 CSS는 제안을 사용하고 그것은 내 생각과 동일하다고 생각하는 내 문제를 해결하지 못합니다.

왼쪽으로 이동 된 nav 열과 탐색 블록에 대해 왼쪽으로 내용 블록 (구역)이 떠있었습니다. 그런 다음 footer 섹션 (html5)이 있습니다. 인라인 인 바닥 글 탐색을 만들려고합니다.

바닥 글 탐색은 nav 열 아래에 있지만 텍스트의 왼쪽 (nav 열을지나 확장)에 나타납니다. 또한 인라인이 아닌 블록 형식으로 나타납니다.

HTML

대략이다

<nav> 
    <ul> 
    <li><a>...</a></li> 
    .. 
    .. 
    </ul> 
</nav> 

<section> 
...text... 
</section> 

<footer> 
    <ul> 
    <li><a>...</a></li> 
    .. 
    .. 
    </ul> 
</footer> 

그리고 CSS 대략적이다 : 여기

nav { 
    float: left; 
    .. 
    .. 
} 

section { 
    float: left; 
    .. 
    .. 
} 

footer { 
    clear: both; 
} 

footer li { 
    display: inline; 
} 

이 일례이다. 당신의 예에서

http://jsfiddle.net/abalter/NdExx/2/

Answer 1

해결해야 할 몇 가지 CSS 문제가 있습니다.

1. 실제 필요없이 많은 절대/상대 위치 지정을 사용합니다.
2. 필요할 때 공급 업체를 지정하지 마십시오.
3. CSS에 마지막으로 닫는 팔찌가 있습니다 (결국).
4. 당신은 이중 선언을했습니다 (무해하지만 성가신 경우). 당신이 CSS 고정 된 것을 사용하는 경우

BTW, 당신은 clear:both;가 갑자기 작동하는 것을 볼 수 있습니다. (텍스트 섹션이 절대적으로 배치 되었기 때문에 이전에는 작동하지 않았습니다.) 또한 :텍스트 섹션을 하나의 div에 넣으 므로 <footer>을 지우지 않고도 여전히 그 아래에 있도록하는 것이 좋습니다.

li 요소가 display:inline;으로 설정되었지만 모두에 div이 포함되어 있기 때문에 결과적으로 블록 요소처럼 동작합니다. 을 쉬운 픽스로 사용하여 CSS 끝의 footer li 선택기를 footer *으로 변경했지만 정확히 원하는 항목을 inline으로 지정해야합니다.

그래서 여기에 변경 사항을 보여주는 Fiddle이 있습니다.

고정 CSS (+ 공급 업체 특성, -typos, 두 배 선언)

#background-image 
{ 
    background: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg); 
    width: 100%; 
    top: 0; 
    left: 0; 
    opacity: 0.6; 
    position: fixed; 
    background-repeat: repeat-y; 
    padding: 0; 
    margin: 0; 
} 

header 
{ 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

#buzz-joy-logo 
{ 
    width: 100%; 
    height: auto; 
    top: 0%; 
    position: relative; 
    z-index: 2; 
    display: block; 
    padding: 0; 
    margin: 0 auto 0 auto; 
} 

nav 
{ 
    padding: 0; 
    margin: 0 0 0 15%; 
    float: left; 
} 

    nav li 
    { 
     display: inline; 
    } 

.nav-link 
{ 
    position: relative; 
    width: 10em; 
    height: 5.3em; 
    background-image: url(http://www.arielbalter.com/BuzzJoy/img/CoffeeCupNoSteam.png); 
    display: block; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%; 
    text-align: center; 
    margin: 0 0 1em 0; 
    padding: 0; 
    text-decoration: none; 
} 

    .nav-link:hover 
    { 
     color: DarkGoldenRod; 
    } 

.nav-cup-image 
{ 
    height: 100px; 
    width: auto; 
    padding: 0; 
    margin: 0; 
} 

.nav-text 
{ 
    position: relative; 
    color: Yellow; 
    font-size: 1.5em; 
    text-align: center; 
    font-family: "GillSansUltraBoldCondensedRegular", sans-serif; 
    font-weight: 100; 
    margin: 0% 13% 0 0; 
    padding: 0.6em 0em 10em 0; 
} 

    .nav-text:hover 
    { 
     color: DarkGoldenRod; 
    } 

#nav-list 
{ 
    list-style-type: none; 
    padding: 0; 
} 

.text-section 
{ 
    width: 40%; 
    background-color: GoldenRod; 
    background-color: rgb(188, 121, 0); 
    background-color: #BC7900; 
    opacity: 0.9; 
    padding: 0 2em 0 1em; 
    margin: 1% 0 0 0; 
    float: left; 
} 

    .text-section h1 
    { 
     font-family: "GillSansUltraBold", sans-serif; 
     font-size: 2em; 
     margin: 0 0 0.2em 0; 
     padding: 0; 
    } 

    .text-section h2 
    { 
     font-family: "OpenSansExtraBold", sans-serif; 
     font-size: 1.8em; 
     margin: 0.4em 0 0em 0; 
     padding: 0; 
    } 

    .text-section p 
    { 
     font-family: "OpenSans", sans-serif; 
     font-size: 1em; 
     padding: 0; 
     margin: 0 0 0.3em 0; 
    } 

footer 
{ 
    clear: both; 
} 

    footer * 
    { 
     display: inline; 
    } 

Answer 2

당신은 단지로는 .text 섹션을 설정해야합니다

position: relative; 

원하는처럼 바닥 글은 맨 아래로 이동합니다.

그렇지 않으면 일반 코드가 기본적으로 원하는 것을 수행합니다. 다음은 개념을 보여주는 빠른 펜입니다. Example Pen