如何使用 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 移动到底部。 只需相应修改即可。