如何使用 CSS 垂直向下移動 div

Question

我是 CSS 新手，我想向下移動一個 div 部分（請參見下面的附圖）：

如何使 div.title “下浮”，使其整齊地落在主 div（淺綠色框）的左下角。

我試過垂直對齊，但它不起作用。

Answer 1

給margin-top

div{margin-top:10px;}

Answer 2

你可以讓你的藍色div position: relative然后給div.title position:absolute; 和bottom: 0px

這是一個工作演示.. http://jsfiddle.net/gLaG6/

Answer 3

我在這里沒有看到任何提到 flexbox 的內容，所以我將說明：

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

標准 16px 字體的標准寬度空間是 4px。

來源： http : //jkorpela.fi/styles/spaces.html

Answer 5

如果 div.title 是一個 div 然后把這個：

left: 0;
bottom: 0;

Answer 6

試試這個配置：

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

這可以幫助實際將 div 移動到底部。 只需相應修改即可。