Question

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

enter image description here

如何使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

尝试一下：

*{
  margin: 0;
  padding: 0;
}
div{
  width: 100px;
  height: 100px;
  /*From Here Is Your Css */
  bottom: 0;
  position: absolute;
  background-color: #F00;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index, follow" />
<link rel="canonical" href="http://" />
<meta name="author" content="">
<meta name="google-site-verification" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One|Lato" rel="stylesheet">
<title></title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div></div>
</body>
</html>

这是简单易行的方法。

Answer 6

尝试此配置：

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

这实际上可以帮助将div移到底部。只需进行相应的修改即可。

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

6 个答案: