Html 如何使用 CSS 垂直向下移动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15918251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move div vertically down using CSS
提问by viv_acious
I'm new to CSS and I'd like to move a div section down (pls see attached image below):
我是 CSS 新手，我想向下移动一个 div 部分（请参见下面的附图）：
How do I make the div.title "float down" so that it neatly settles to the bottom left corner of the main div (aqua coloured box).
如何使 div.title “下浮”，使其整齐地落在主 div（浅绿色框）的左下角。
I've tried vertical-align but it doesnt work.
我试过垂直对齐，但它不起作用。
回答by Akhil Thesiya
Give margin-top
给margin-top
div{margin-top:10px;}
回答by TryingToImprove
You could make your blue divposition: relativeand then give the div.titleposition:absolute;and bottom: 0px
你可以让你的蓝色divposition: relative，然后给div.titleposition:absolute;和bottom: 0px
Here is a working demo.. http://jsfiddle.net/gLaG6/
这是一个工作演示.. http://jsfiddle.net/gLaG6/
回答by agm1984
I don't see any mention of flexbox in here, so I will illustrate:
我在这里没有看到任何提到 flexbox 的内容，所以我将说明：
HTML
HTML
<div class="wrapper">
<div class="main">top</div>
<div class="footer">bottom</div>
</div>
CSS
CSS
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1;
}
.footer {
flex: 0;
}
回答by Wylliam Judd
A standard width space for a standard 16px font is 4px.
标准 16px 字体的标准宽度空间是 4px。
回答by Dereck Smith Elijah
try this:
尝试这个：
*{
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>It is Simple and easy way to do it.
这是简单易行的方法。
