2013-12-16 4 views
2

내 페이지에 게시 된 최신 메시지 세트를 만들고 싶습니다. 그 상자는 항상 (그들이 대신 서로 아래에, 행에있는 한) 같은 크기와 세 부분으로 구성해야합니다div의 맨 아래에 텍스트의 끝을 맞 춥니 다

  • 제목 (H3)
  • 내용 (특정 태그)
  • 정말 저자을 갖는 방법을 생각하지 못했습니다
  • 저자 (스팬)

가 같은 위치에 항상 제목을 유지하기 어려운 것은 아니지만는 하단의 항상 할 수 그 상자는 아무리 많은 내용이 있더라도 상관 없습니다.

아마도 나는 너무 복잡하다고 생각합니다.

미리 도움을 청하십시오!

+1

네 모든 것이 우리가 할 수있는, 좋은 소리 약간의 코드를 가지고 있니? –

+0

저기 저 : [jsFiddle] (http://jsfiddle.net/mB5bL/1/) – Padarom

답변

3

position: relative, 부모 상자는 position: absolute; bottom: 0;입니다.

정말 도움이되지 않기 때문에 완전한 해결책을 제공하지 않겠습니다.

CSS Positioning 101

+1

나는 그것을 알고, 나는 항상 너무 복잡하다고 생각하고 해결책을 얻지 못한다 :/Thanks – Padarom

+1

@Padarom http : // jsfiddle .net/mB5bL/2 / –

1

당신은 HTML 절대 위치 CSS와 스팬에서 상대적으로 설정 래퍼를 사용할 수 있습니다

<div class="wrapper"> 
    <h3>Title</h3> 
    <p>Title</p> 
    <span class="author">Title</span> 

CSS

.wrapper{position: relative; padding-bottom: 1em;} .author{position: absolute; bottom: 0; right: 0