如何使用CSS垂直向下移动div答案

【问题标题】：How to move div vertically down using CSS如何使用CSS垂直向下移动div
【发布时间】：2013-04-01 20:18:08
【问题描述】：

我是 CSS 新手，我想将 div 部分向下移动（请参阅下面的附图）：

如何使 div.title “向下浮动”，以便它整齐地放置在主 div 的左下角（水色框）。

我试过垂直对齐，但它不起作用。

【问题讨论】：

【解决方案1】：

如果 div.title 是一个 div 然后把这个：

left: 0;
bottom: 0;

【讨论】：

【解决方案2】：

试试这个配置：

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

这有助于实际将 div 移动到底部。只需相应修改即可。

【讨论】：

【解决方案3】：

标准 16px 字体的标准宽度空间是 4px。

【讨论】：

【解决方案4】：

我在这里没有看到任何提到 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;
 }

【讨论】：

好答案，只是缺少解释：flex 属性是 flex-grow、flex-shrink 和 flex-basis 组合的简写。仅使用一个值等于使用flex-grow。 flex 属性不会像问题中所问的那样移动 div，但会按照 OP 的要求进行操作。要真正移动一个 div，如果下面还有另一个 div 我们想跳过，请使用 order: 1 而不是 flex 属性。

【解决方案5】：

你可以让你的蓝色 div position: relative 然后给 div.title position:absolute; 和 bottom: 0px

这是一个工作演示。http://jsfiddle.net/gLaG6/

【讨论】：

【解决方案6】：

上边距

div{margin-top:10px;}

【讨论】：