반응 형 화면 크기의 CSS div

Question

표시 할 텍스트로 로고 및 로고 이름이 있습니다. 내 문제를 분명히 이해하려면 아래 이미지를 참조하십시오. 대부분의 도움말과 답변은 절대 위치 지정을 사용하고 있지만 이것이 내 요구 사항과 일치하지 않습니다.

DIV 클래스 상자 : 노란색 : 용기, 녹색 : 로고, 블루 : 로고 텍스트 또는 로고 이름을 텍스트로 모든 올바른 표시를 달성하기

샘플의 오른쪽에 발견 div 레이아웃 이미지 위.

문제 요약 : 두 사업부 (로고 및 로고 텍스트) 하지만 유일한 문제는 그 위에 부유 왼쪽 떠 경우

1. 모든 것이 잘 작동 될 것입니다. "컨테이너"하단에 "로고 텍스트"를 어떻게 표시합니까?

2. "로고 텍스트"를 절대 위치에 두지 않고도 가능합니까?

지금은 div 컨테이너, 로고 및 로고 텍스트 클래스가 왼쪽으로 플로팅됩니다.

Answer 1

display: inline-block은 vertical-align: bottom;으로 생각합니다.

<div class=logo>logo</div> 
<div class=name>name</div>​ 

.logo { 
    display: inline-block; 
    vertical-align: bottom; 
    width: 200px; 
    height: 200px; 
    background-color: red; 
} 
.name { 
    display: inline-block; 
    vertical-align: bttom; 
    width: 300px; 
    height: 50px; 
    background-color: blue; 
} 

는 여기 행동에 : http://jsfiddle.net/hajpoj/CDBHT/

Answer 2

이 효과를 볼 수있는 결과 창 크기를 조정합니다.

DEMO

자녀 사업부의 inline-block는 솔루션입니다 만들기. 또한 콘텐츠에 맞게 크기를 조정하려면 max-width 및 min-height 속성을 컨테이너에 제공해야합니다. 참조이 솔루션 -

, HTML

<div id="con"> 
    <div id="lo"></div> 
    <div id="tex"></div> 
</div> 

CSS-

#con 
{ 
    max-width:310px; 
    min-height:140px; 
    background:yellow; 
    border: 1px solid aqua; 
} 

#lo 
{ 
    width:140px; 
    height:140px; 
    background:green; 
    display:inline-block; 
    vertical-align:bottom; 
} 

#tex 
{ 
    width:160px; 
    height:60px; 
    background:orange; 
    display:inline-block; 
    vertical-align: bottom; 
}