CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

HTML

... Your content here ...

这个技巧的工作原理是创建一个高大的瘦小的div,它将文本基线推到容器的底部.

这是一个完整的例子,可以实现OP的要求.我将"bottom_aligner"设为厚实和红色仅用于演示目的.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

  

    

      This text
      
 is on top.
    
    

      

      

        I like it here
        
 at the bottom.
      
    
  

现代的方法是使用flexbox.请参阅下面的示例.您甚至不需要包装Some text...到任何HTML标记中,因为直接包含在Flex容器中的文本包装在匿名的flex项中.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

  
Header title
  Some text aligns to the bottom

display: flex;
align-items: flex-end;

I'm at the bottom

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

  
Header title
  Some text aligns to the bottom