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

Question

I'm new to CSS and I'd like to move a div section down (pls see attached image below):

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).

I've tried vertical-align but it doesnt work.

Answer 1

给margin-top

div{margin-top:10px;}

Answer 2

You could make your blue div position: relative and then give the div.title position:absolute; and bottom: 0px

Here is a working demo.. http://jsfiddle.net/gLaG6/

Answer 3

I don't see any mention of flexbox in here, so I will illustrate:

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

A standard width space for a standard 16px font is 4px.

Source: http://jkorpela.fi/styles/spaces.html

Answer 5

if div.title is a div then put this:

left: 0;
bottom: 0;

Answer 6

Try this configuration:

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

This can help actually move the div to the bottom. Just modify accordingly.