javascript - css3 ボックス モデル フローティング エレメント

Question

私は Web デザインの初心者で、ボックス レイアウトの問題を理解していると思います。

ここにフィドルがあります

HTML

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

CSS

.content{
   display:-webkit-box;
}

今私の問題は、内側の要素を1つ左に、もう1つを右に揃える必要があることです。

私は古い方法でそれを行う方法を知っていますが、ボックスプロパティでやりたいと思います。

やり方が古い。

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

.right{
  float:right;
}  

Answer 1

これが非常にうまく機能する代替案です：

.content{
    display: -webkit-box;
}

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

そして、固定幅を必要としません。

Answer 2

box-pack プロパティを使用してコンテンツを正当化します。

box-pack:justify;

実際の例のフィドル。

Answer 3

Opera と IE はこれをサポートしていません。レイアウト ベースであるため、おそらく企業サイトにはそのまま残されますが、個人用には通常の方法でスタイルを設定する必要があるため問題ありません。