액세스 가능성을 위해 크기 조정을 유지하면서 Div의 아래쪽에 정렬

Question

div를 위치 포함하여 Div의 아래쪽에 강제로 배치하는 방법을 살펴 보았습니다. 절대; 및 하단 : 0px; 어린이 Div를 수용하기 위해 포함 된 Div를 확장하는 방법은 있지만 함께 작동하도록 할 수는 없습니다. 브라우저에서 글꼴 크기를 변경하는 사용자가 액세스 할 수있는 사이트를 만들려고합니다.

이 코드는 Div를 아래쪽으로 강제 이동하지만 포함 된 Div를 필요에 따라 확장하지 않습니다. .exhibit_text 위치를 relative로 변경하면 포함 Div가 확장되지만 하단 정렬은 손실됩니다. (텍스트는 데이터베이스에서오고, 그래서 나는 그것이 얼마나 오래 모르거나 얼마나 큰 사용자가 자신의 글꼴 크기를 설정 한 것입니다.)

<style type="text/css"> 
.exhibit { 
    position: relative; 
} 
.exhibit_text { 
    width: 380px; 
    position: absolute; 
    bottom: 0px; 
    float: left; 
} 
.exhibit_image { 
    height: 300px; 
    width: 400px; 
    margin-left: 450px; 
    background-color:#FF0; 
} 
hr { 
    clear: both; 
} 
</style> 
<hr /> 
<div class='exhibit'> 
    <div class='exhibit_text'><p>Long text: Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. </p> 
    </div> 
    <div class="exhibit_image"> 
    </div> 
</div> 
<hr /> 
<div class='exhibit'> 
    <div class='exhibit_text'><p>Short text: Susan Low-Beer and Meryl McMaster expand our understanding of the genre. </p> 
    </div> 
    <div class="exhibit_image"> 
    </div> 
</div> 
<hr /> 

Answer 1

내가 "확장"당신의 뜻이 무엇인지 확실하지 않다, 그래서 난 당신이 컨테이너 (DIV)의 div의 바닥과 용기 (DIV)에있을 것인지 짐작을 확장 할 수있다 신장.

여기에 코드입니다 :

.exhibit > div{ 
    display: inline-table; 
    vertical-align: bottom; 
} 

그것을 시도 :)

Answer 2

내가 너비가 설정 치우는 제안 exhibit_text. 대신 min-width: 380px을 설정하고 width: auto으로 설정합니다. 이는 div가 확장되어 그 안에 보유 된 모든 콘텐츠를 포함 할뿐만 아니라 380px 너비보다 작아지지 않음을 의미합니다.

편집 : 달성하려는 작업을 100 % 확신하지 못했습니다. 귀하의 코드를 JSFIDDLE에 붙여 넣었습니다. 25px 글꼴로 텍스트를 둘러 쌉니다. 정확히 당신이 성취하고자하는 것은 무엇입니까?

The Fiddle