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不支持这一点，因为它的布局基于它可能留在公司的网站，但个人可以，因为你需要以正常的方式来设计它。