텍스트를 아래쪽에 배치하지만 문서 흐름에 그대로두기

다음과 같은 문제가 있습니다 : 이미지가 왼쪽에 떠 있고 오른쪽에 여백이 있습니다. 그 옆에는 제목과 텍스트가 포함 된 div가 있습니다. 동적으로 삽입되기 때문에 둘 다 높이 값을 알 수 없습니다.텍스트를 아래쪽에 배치하지만 문서 흐름에 그대로두기

헤드 라인은 상단에, 텍스트는 하단에 정렬해야합니다. 텍스트의 절대 위치를 지정하는 것으로 충분하지만 이미지의 높이가 헤드 라인 + 텍스트의 높이보다 작 으면 텍스트가 헤드 라인으로 흐릅니다.

나는 해결책을 찾지 못했습니다. 텍스트를 하단에 놓고 문서 흐름에 머물게합니다.

내가 어떤 테이블 요소를 사용하도록 허용하고 있지 않다

합니다 (otherhand, 디스플레이 : 허용 등 테이블과,하지만 나뿐만 아니라 그 어떤 솔루션을 파악하지 않은)

<<<HTML 
<div> 
    <h4>A headline, that isn't involved</h4> 
    <div class="clearfix"> 
     <div> <!-- float left, margin-right --> 
      <img> 
     </div> 
     <div> <!-- float left --> 
      <h5>The headline aligning to the top</h5> 
      <p> 
       Some text aligning to the bottom 
      </p> 
     </div> 
    </div> 
</div> 
HTML

하세요 도와주세요, 나는 단지 어떤 해결책도 찾아 낼 수 없다!

enter image description here

/EDIT :

모두 imnages '및 텍스트 -/- 헤드 용기'높이가 다를 수 있으므로 정해진 높이. 필자가 지금까지 가지고있는 것은 (텍스트가 4 줄 이상을 가지지 않는다는 가정하에, 가장 좋은 방법은 아닙니다.) 다음 문제는 Firefox가 .box의 여백을 바닥에 추가하는 것입니다. 텍스트 (같은 : 하단 : -35px; 그러나 아래로 표시 : 0; ... 크롬 올바른 방법 것으로 해석 않음) :

<style> 
    .box { 
     width: 488px; 
     float: left; 
     margin-bottom: 33px; 
     margin-right: 22px; 
     padding-top: 5px; 
    } 

    .table { 
     display: table; 
    } 

    .box.wide .box-content { 
     display: table-row; 
    } 
    .box.wide .box-content > div { 
     display: table-cell; 
     position: relative; 
     width: 233px; 
    } 
    .box.wide .box-content > div:first-child { 
     margin-right: 22px; 
    } 

    .box.wide .box-content div h5 { 
     padding-bottom: 88px; 
    } 
    .box.wide .box-content div p { 
     position: absolute; 
     bottom: 0px; 
    } 

</style> 

<div class="box wide width-488"> 
    <div> 
    <h4>Überschrift</h4> 
    <div class="table"> 
     <div class="box-content"> 
      <div> 
       <img alt="" height="401" width="233" src="res/dummy/233-130.jpg"> 
      </div> 

      <div> 
       <h5>Überschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5> 
       <p> 
       Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet. 
       <a href="#">mehr</a> 
       </p> 
      </div> 
     </div> 
    </div> 
    </div> 
</div>

출처

2012-10-25 Mohammer

모두 부동 요소 및 정렬 할 텍스트 요소에 display: inline-block;를 사용해보십시오 바닥에.

는 그런 다음 하단에 정렬 할 텍스트 요소의 특성 vertical-align: bottom;을 넣어.

출처

2012-10-25 13:03:59 fauverism

I을 왼쪽 열 &이 이미지 예제에서 똑같기 때문에 오른쪽 열을 고정 높이로 만들 수 있다고 가정합니다.

내가 편의를 위해 jsfiddle했다 : 나는 당신이 원하는 <p> 주위에 .bottom-text 클래스를 추가

<h4>A headline, that isn't involved</h4> 
<div class="clearfix"> 
    <div class="left"> <!-- float left, margin-right --> 
     <img src="http://placehold.it/150x350" alt="placeholder" /> 
    </div> 
    <div class="right"> <!-- float left --> 
     <h5>The headline aligning to the top</h5> 

     <div class="bottom-text"> 
      <p> 
       Some text aligning to the bottom 
      </p> 
     </div><!-- .bottom-text --> 
    </div> 
</div>

참고 : http://jsfiddle.net/hLPXM/

다른 방법을, 여기에 내가 원래 코드를 기반으로, 무슨 짓을 아래쪽 정렬.

여기 divs가 올바르게 플로팅되는 CSS 등이 있습니다.참고 position:relative; :

.left {float:left; margin-right:20px;} 
.right {float:left; background:#eeddff; /*background to see div*/} 

.left, .right {height:350px; position:relative;}

그리고 더 중요한 기준선에서 시작되는 텍스트 :

.bottom-text { 
    position:absolute; 
    bottom:0; 
}

출처

2012-10-25 13:21:55 Andy

SRY 난 .left 내 포스트 높이를 수정하며 늘 동일 됐지하고 (따라서 정해진 높이 값 ...) – Mohammer

디스플레이를 사용, 당신을위한 솔루션입니다 : 테이블을, 상대적 위치 및 절대 위치 :

<div> 
    <h4>A headline, that isn't involved</h4> 
    <div style="display:table;"> 
     <div style="display:table-row;"> 
      <div style="display:table-cell;padding-right: 20px;"> 
       <img style="display:block" src="http://baconmockup.com/300/200"> 
      </div> 
      <div style="display:table-cell;background:green;position:relative;vertical-align:top;"> 
       <p style="">Some text aligning to the top</p> 
       <p style="position:absolute;bottom:0;">Some text aligning to the bottom</p> 
      </div> 
     </div> 
    </div> 
</div>

고정 된 높이에 의존하지 않고 자동으로 이미지의 높이를 채택합니다.

jsfiddle.net/EUvXh/ 혼란위한

출처

2012-10-25 13:45:26 sphair

다를 수 텍스트 컨테이너의 위치는 상대적이지만 위치는 http://jsfiddle.net/Mohammer/JjUyZ/ – Mohammer

입니다. 문제가 있습니까? 절대 위치의 하단 텍스트에 대한 새 위치 컨텍스트를 만드는 데 사용됩니다. – sphair

예, 텍스트는 화면의 컨테이너 내부에 있어야하지만 전체 뷰포트의 하단 (녹색 상자 안쪽에 있어야 함) – Mohammer

텍스트를 아래쪽에 배치하지만 문서 흐름에 그대로두기

답변

관련 문제