Html & CSS - 중력 변경

요소가 실제로 아래쪽에만있는 웹 사이트를 만들고 있습니다. 필자는 필자의 수직 시작점을 맨 위 대신 맨 아래부터 시작하고 싶다. 그리고 나는 한 요소의 위치가 의존 할 수 있도록 페이지의 정상적인 흐름에서 그 요소들을 취하지 않고 이렇게하고 싶다. 다른 쪽의 위치에. 어떻게해야합니까? '아래쪽 요소'에 대한 시각적 설명은 다음과 같습니다. http://imgur.com/YrzkQfi Html & CSS - 중력 변경

<head> 
    <style> 
     body { 
      background: url('Index-Background.jpg') no-repeat center center fixed; 
      background-size: cover; 
     } 
     section { 
      margin-left: 2%; 
     } 
     nav { 
      margin-bottom: 6.66%; 
     } 
    </style> 
</head> 
<body> 
    <main> 
     <section> 
      <h1>The Great Composers</h1> 
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div> 
     </section> 
     <nav> 
      <ul> 
       <li><a href="#0">Gershwin</a></li> 
       <li><a href="#0">Debussy</a></li> 
      </ul> 
     </nav> 
    </main> 
</body>

출처

2016-06-21 Oli

당신은 당신이 "나는 요소는 맨 아래에 정말 웹 사이트를 구축하고 있습니다."무슨 뜻인지 설명 할 수 있을까? – derp

http://imgur.com/YrzkQfi – Oli

그는 단지 자신의 웹 사이트가 중력을 따르길 원합니다. 그가 의미하는 바는 위에서 아래로 정상적인 행동 대신 요소가 자동으로 아래에서 위로 정렬되어야한다는 것입니다. –

글쎄, 몇 가지 해결 방법이 있습니다. 당신은

html, body { 
    height: 100%; 
} 
body { 
    display: table; 
} 
main { 
    display: table-cell; 
    vertical-align: bottom; 
}

이 작업 예를 참조하십시오,이 같은 작업을 수행 할 수 있습니다 https://jsfiddle.net/L1w9m3mz/

출처

2016-06-21 06:18:29

봅니다이

html, body { 
     position: relative; 
    ... 
    } 
html { 
    position: relative; 
    ... 
    }

편집을 시도 section 및 nav 주문

<nav> 
    <ul> 
     <li><a href="#0">Gershwin</a></li> 
     <li><a href="#0">Debussy</a></li> 
    </ul> 
</nav> 
<section> 
    <h1>The Great Composers</h1> 
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div> 
</section>

출처

2016-06-21 04:02:33 OnlyNoiseOnWires

을 변경하려면 다음이 도움이 될 수 있습니다. How can I position my div at the bottom of its container?

출처

2016-06-21 04:08:22 anjali

하지만 어떻게하면 아래쪽에있게 될까요? – Oli

여기에 "그들"이란 무엇입니까? – anjali

@Oli, 위의 수정 된 답변을 확인하고 알려 주시기 바랍니다. – anjali

흠, 나는 네가 달성하기를 원하는 바가 아직 많지 않다. 그러나 네비게이션 바를 수평으로 만들려고한다면. 다음 CSS를 추가해야합니다 :

li { 
    display: inline-block; 
    padding-right:10px; 
}

출처

2016-06-21 04:28:38 derp

어떻게 nav 위치를 설정하는 position:fixed 사용에 대한. 다음은 첨부 한 이미지에서 결론을 내리는 것입니다. JSFiddle

출처

2016-06-21 04:31:59

사용 인 flexbox을 - 모든 최신 브라우저는
는 역 할 위치 .reverse 추가 지원합니다.

http://caniuse.com/#search=flexbox

.reverse { 
    display: flex; 
    flex-direction: column-reverse; 
    }

출처

2016-06-21 06:31:38

Html & CSS - 중력 변경

답변

관련 문제