세 개의 인라인 요소를 왼쪽, 가운데 및 오른쪽으로 정렬

Question

여러 화면 결과에 사용할 수있는 부동 하단 메뉴를 작성하려고합니다. 지금까지 나는 세 개의 독립적 인 요소를 왼쪽, 중간 및 오른쪽 위치에 정렬 할 수 없었습니다. (최고의 모바일 화면에서

: 모바일 화면에서

(최악의 경우) : 여기

는 넓은 화면에 어떻게 보일지입니다 사례 시나리오) :

는 여기에 내가 무엇을의 JSFiddle입니다 : display: inline-block; 어린이와 부모와 자녀에 정렬의 다른 조합에 :

http://jsfiddle.net/ZYw6a/ 내가 사용했습니다. 툴바는 별 모양처럼 보일뿐입니다. height: 0; 설정도별로 도움이되지 않았습니다. 모든 것이 인라인인데도 크기를 조정하면 항목이 겹치게됩니다.

나는 테이블을 사용하는이 야생 아이디어를 가졌다. 나는 시도하고 싶지 않다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

당신은 테이블 셀처럼 된 div를 표시하는 display: table-cell을 사용할 수 있습니다

Answer 1

:

HTML

<div class="container"> 
    <div class="left">Div with text Buttons</div> 
    <div class="middle">Div with span Image sprite</div> 
    <div class="right">Div with textarea Search field</div> 
</div> 

CSS

.container { 
    display: table; 
    width: 100%; 
} 
.container .left, 
.container .middle, 
.container .right { 
    display: table-cell; 
    padding: 10px; 
} 
.container .left { 
    color: #9AD0E5; 
    background: #3F48CC; 
    width: 200px; 
} 
.container .middle { 
    color: #3F48CC; 
    background: #FF7F27; 
} 
.container .right { 
    color: #A349A4; 
    background: #880015; 
    width: 200px; 
} 

@media screen and (max-width: 480px) { 
    .container .left, 
    .container .middle, 
    .container .right { 
     display: block; 
     margin: 10px auto; 
    } 
} 

Demo