css3盒模型浮动元素

Question

我是网站设计的新手，我认为我对框布局的理解问题。

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;
}

现在我的问题是我必须将内部元素左对齐，将另一个对齐到右边。

我知道如何以旧的方式做到这一点，但我想用盒子属性来做。

老方法。

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