절대 위치 지정없이 DIV의 반대쪽 두 요소를 정렬하십시오.

Question

<h2> 및 <button>의 두 요소가 포함 된 DIV를 만들려고합니다. 용기의 반대쪽 (좌우)에 있어야합니다. 나는 자식 요소에 절대 위치를 사용하여 그렇게 관리해야 :

#header2{ 
    position: relative; 
    padding: 0.4em; 
    color: white; 
    background-color: #CC3333; 
    min-height: 100px; 
} 

h2{ 
    position: absolute; 
    display:inline; 
} 


#button{ 
    position: absolute; 
    text-decoration: none; 
    vertical-align: middle; 
    padding: .1em; 
    width:100px; 
    height: 80%; 
    margin-right: 5px; 
    right: 0; 
} 

지금 나는 그들이 작은 화면에 표시되지 않을 때 이러한 요소가 겹치는 것을 찾을 수 있습니다. 이것은 절대 위치 때문에 이러한 요소가 발생한다는 것을 이해합니다. 이러한 요소는 레이아웃 흐름을 무시합니다. 그래서, 내가 찾고자하는 것은 반대편에있는 요소를 정렬하고 div의 레이아웃 흐름을 유지하여 유연성을 향상시키는 방법입니다.

Answer 1

편도는 float입니다. 그러나 clear the floats을 기억하십시오.