css3 상자 모형 떠 다니는 요소

Question

나는 웹 디자인에 아주 새로운 bie이다 상자 배치의 나의 이해 문제를 생각한다.

Here is fiddle

HTML

.content{ 
    display:-webkit-box; 
} 

지금 내 문제는 내가 내부 요소를 하나 해주 왼쪽과 오른쪽에 다른 정렬 할 필요가있다

<div class="content"> 
    <p class="inner left">....foofoofoo..</p> 
    <p class="inner right">....blablabla..</p> 
</div> 

CSS.

나는 옛 방식으로하는 법을 알고 있지만 박스 속성으로하고 싶습니다.

옛날 방식.

.content{ 
    display:block; 
} 
.left{ 
    float:left; 
} 

.right{ 
    float:right; 
} 

Answer 1

콘텐츠를 정당화하기 위해 box-pack 속성을 사용하십시오.

box-pack:justify; 

fiddle의 실시 예이다.

Answer 2

여기에 아주 잘 작동 대안이다 :

.content{ 
    display: -webkit-box; 
} 

.inner { 
    -webkit-box-flex: 1; 
} 

그리고 고정 폭을 필요로하지 않습니다.

Answer 3

오페라와 IE는 이것을 지원하지 않으며 레이아웃 기반이므로 회사 사이트에서는 혼자 남겨두고 있지만 어쨌든 일반적인 방식으로 스타일을 지정해야하므로 개인적으로는 괜찮습니다.