asp.net - CSSを使用してdivを垂直に下に移動する方法

Question

私は CSS を初めて使用するので、div セクションを下に移動したいと思います (以下の添付画像を参照してください)。

div.title を「フロートダウン」して、メインの div (水色のボックス) の左下隅にきちんと収まるようにするにはどうすればよいですか。

垂直方向の配置を試みましたが、うまくいきません。

Answer 1

マージントップを与える

div{margin-top:10px;}

Answer 2

あなたはあなたの青を作り、そしてdiv position: relative与えることができますdiv.title position:absolute;bottom: 0px

これが実際のデモです.. http://jsfiddle.net/gLaG6/

Answer 3

ここではフレックスボックスについて言及していないので、説明します:

HTML

 <div class="wrapper">
   <div class="main">top</div>
   <div class="footer">bottom</div>
 </div>

CSS

 .wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
  }
 .main {
   flex: 1;
 }
 .footer {
  flex: 0;
 }

Answer 4

この構成を試してください:

    position to absolute
    width to 100%
    height to 100px
    bottom to 10
    background-color: blue

これは実際に div を一番下に移動するのに役立ちます。それに応じて変更するだけです。