div 하단에 텍스트 배치

div 하단에 텍스트 배치

---

4 개의 DIV가 나란히 있고 모두 화면 중앙에 있습니다. 각 div에 2 개의 단어가 있지만 상단에 표시되는 것이 아니라 div의 오른쪽 하단 모서리에 표시되기를 원합니다. 어떻게 할 수 있습니까?

---

span또는 유사한 텍스트를 감싸고 다음 CSS를 사용하십시오.

.your-div {
    position: relative;
}

.your-div span {
   position: absolute;
   bottom: 0;
   right: 0;
}

---

<div id="container">
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
</div>

#container{
    width:450px;
    height:200px;
    margin:0px auto;
    border:1px solid red;
}

#container div{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
    float:left;
    margin-right:5px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}

http://jsfiddle.net/7YTYu/2/ 에서 작동 예를 확인하십시오.

---

한 줄의 텍스트 만 있고 div의 높이가 고정 된 경우 다음을 수행 할 수 있습니다.

div {
    line-height: (2*height - font-size);
    text-align: right;
}

바이올린 참조 .

---

감사합니다 @Harry 다음 코드가 저에게 효과적입니다.

.your-div{
   vertical-align: bottom;
   display: table-cell;
}

---

절대 위치보다 플렉스 박스 ( 호환성 ) 를 사용하는 것이 낫다고 생각합니다 . 다음은 순수한 CSS의 예입니다.

.container{
  background-color:green;
  height:500px;
  
  /*FLEX BOX */
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.elem1{
  background-color:red;
  padding:20px;
  
   /*FLEX BOX CHILD */
 -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
 
}

<div class="container">
 TOP OF CONTAINER 
<div class="elem1">
  Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.

Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi.

Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo.
</div>

</div>

참고URL : https://stackoverflow.com/questions/5288336/put-text-at-bottom-of-div