HTML CSS : 아래쪽에 3 개의 div 및 요소 정렬

Question

현재 HTML5 헤더 태그 내에 3 개의 div가 있습니다 (왼쪽에는 검색 상자, 가운데 - 로고 영역 및 오른쪽에있는 div - 소셜 미디어 아이콘 용).

그러나 괜찮은 것 같습니다.하지만 div의 왼쪽과 오른쪽 요소를 아래쪽에 배치하고 왼쪽과 오른쪽 div가 모두 로고 영역의 크기에 영향을받는 데 어려움이 있습니다. 예를 들어 내 로고가 x 높이 인 경우 로고 크기 높이가 커짐에 따라 왼쪽 및 오른쪽 div가 아래로 밀려납니다. 사람이 도움을 줄 수 있다면 내가 잘하면 내가 무슨 말 설명하기 위해 간단한 예를 작성했습니다

.. http://jsfiddle.net/9patj/

, 그게 달성하는 방법을 저를 통해 걷기에 큰 아마도 보너스가 될 것입니다 정말 감사하겠습니다.

Answer 1

헤더 내에서 상대/절대 위치 지정을 시도 할 수 있습니다.

CSS를 들어

, 당신은 시도 할 수 있습니다 :

header { 
    margin: 0px 29px 29px 29px; 
    background: #CCC; 
    width:960px; 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
    position: relative; 
} 

#search { 
    float:left; 
    width:215px; 
    background-color:red; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

#social { 
    float:right; 
    width:215px; 
    background-color:yellow; 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
} 

#logo { 
    float:center; 
    text-align:center; 
    position: absolute; 
    bottom: 0px; 
    left: 50%; 
} 

헤더에 상대 위치를 설정하면 절대 위치에 그 자식 요소 중 각을 설정할 수 있습니다. 이렇게하면 각 하위 요소를 머리글의 맨 아래에 배치 할 수 있습니다.

중요 부분은 위치 CSS 태그하고 는, 바로 및 바닥 태그를 떠났다. http://jsfiddle.net/9patj/10/

Answer 2

을 참조하십시오.

http://jsfiddle.net/9patj/9/

당신은 위치를 추가해야합니다.