css3盒子模型漂浮元素

Question

我對網頁設計很新穎bie我覺得我理解盒子佈局的問題。

Here is fiddle

HTML

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

CSS

.content{ 
    display:-webkit-box; 
} 

現在我的問題是我必須對準內部元素一個加時賽左和其他向右。

我知道如何以舊的方式做到這一點，但我想用box屬性來做。

老辦法做到這一點。

.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

Opera和IE不支持這一點，因爲它的佈局基於它可能留在公司的網站，但個人可以，因爲你需要以正常的方式來設計它。