Html＆CSS - 重力を変える - 優秀な図書館

私は要素が本当に底だけにあるウェブサイトを構築しています。私は垂直の開始位置を上部ではなく下部で開始したいので、これらの要素をページの通常の流れから外さずに（絶対位置指定なし）、1つの要素の位置が依存できるようにしたいもう一方の位置に置く。どうすればよいですか？「下部の要素」の視覚的説明は次のとおりです。 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

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

この

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

編集してみ変更してください：これは役立つかもしれないが。 How can I position my div at the bottom of its container?

出典

2016-06-21 04:08:22 anjali

しかし、それはどのように下になるのでしょうか？ – Oli

ここに「それら」とは何ですか？ – anjali

@Oli、上記の編集された回答を確認してお知らせください。 – anjali

でも、ナビゲーションバーを水平にしたい場合は、達成したいことはまだ完全にはわかりません。 nav位置を設定するposition:fixedを使用する方法について

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

出典

2016-06-21 04:28:38 derp

方法：次のCSSを追加する必要があります。ここにあなたが添付した画像から私が結論づけるものがあります：JSFiddle

出典

2016-06-21 04:31:59

使用のフレキシボックス - すべての最新ブラウザは、あなたが逆転する場所
が.reverseを追加サポートしています。

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

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

出典

2016-06-21 06:31:38

Html＆CSS - 重力を変える

答えて

関連する問題