CSS : 가로 맞춤 비율로 바닥 글 맞춤 divs

Question

첨부 된 다이어그램에서 볼 수 있듯이 서로 인접한 두 div의 아래쪽을 수직으로 정렬하는 정확한 CSS를 알아 내려고합니다. "DIV.1"이라고 표시된 div에 텍스트가 포함되고 너비는 텍스트 크기/길이에 따라 달라 지므로 div와 관련하여 절대적으로 div를 배치하지 않아야합니다. 사실, 가능한 경우 모든 div에 대해 백분율 기반 너비를 사용하고 싶습니다. "DIV.2"로 표시된 DIV는 이미지를 포함 할 것이고 사이트는 반응 형이어야하므로 max-width 및 가능한 경우 백분율.

여기에 관심을 가져 주셔서 감사합니다.

Answer 1

당신은 할 수 마진 상단 및 아래의 CSS 코드를 볼 플로트. 이 작업을 수행하는

Demo

CSS

.col1{ 
width:200px; 
height:600px; 
background-color:#093; 
position:relative; 
    float:left; 
} 
.col2{ 
width:200px; 
height:200px; 
margin-top:400px; 
background-color:red; 
position:relative; 
float:left;} 
} 

Answer 2

몇 가지 방법 : 테이블과 vertical alignment

를 사용하여 바닥을 사용합니다 :

• 는 컨테이너 요소 표시를 확인 0 div를 containe의 맨 아래에 묶는 것. 아르 자형. 치수를 설정하면 모든 요소에서 작동합니다.

• 위의 예와 같이 명시 적으로 여백을 설정하거나 백분율로 설정하십시오.

  • 여백은 크기를 계산할 때 부모가 아닌 요소의 비율을 사용합니다. 그래서 절반 높이의 div는 margin-top : 100 %를 가졌지 만 컨테이너 높이의 50 %가 아닙니다.

• 왼쪽 div 내에서 패딩을 사용하면 콘텐츠가 부숴집니다. 이것은 아마도 가장 직설적이며 당신은 수레로 주위를 어지럽히 지 않아도됩니다. 투명한 배경을 사용해야합니다.