HTML/CSS Spacer（Flexのようなもの）

Question

Flex/MXMLのようなHTML/CSSを使用する方法があるのだろうかと思っています。つまり、MXMLでは、HBox、VBox、Spacerがグローバルに使用され、その動作は予測可能です。しかし、HTML/CSSでは多くの浮動小数点数を使用し、常に「隠れた驚き」を持っています。

私はどうなるのFlex/MXMLで

：HBoxのは並んで、その中にすべての要素を配置し、スペーサーは見えないです：

<hbox width="100%"> 
    <button label="Button A" /> 
    <spacer width="100%" /> 
    <button label="Button B" /> 
    <button label="Button C" /> 
</hbox> 

• 私はこのコードを説明フレックスわからない場合素子; 100％のスペーサーは親（HBox）と同じ幅を持たず、残りのスペースを埋める。これは、Aが左に整列し、他の2つが右に整列することを意味します。

HTML/CSSでは、ボタンBとCを右に浮かべています。私はまた、最終結果にボタンの順序を同じにする必要があります。それに、私は、おそらく、以下の何ものもうんざりすることのないように、 "clear：both"という空白のタグをつけるでしょう。

HTML/CSSで同じ機能を使用する方法はありますか？ .HBox .VBox .Spacer CSSクラスを作成し、javascriptを使用できない場合、これは素晴らしいことです。

ありがとうございます。

Answer 1

私はそれのスタイルをCSSを使用すると、マークアップ

<div class="formline"><!-- kind of like your hbox --> 
    <div class="buttongroup" id="group1"> 
     <button label="Button A"> <!-- of course, that's usually input type="submit" or something. --> 
    </div> 
    <div class="buttongroup" id="group2"> 
     <button label="Button B"> 
     <button label="Button C"> 
    </div> 
</div> 

次のようなものを使用して、これに似た何かをします。 私はgroup1を左に、float group2を右に浮かべています。囲んでいるフォームラインには、フローティングが含まれています。ボタンは正しい順序で表示されますが、逆にする必要はありません。

これは論理的/構造的なマークアップであり、さまざまなスタイルにすることができます。それはプレゼンテーションのためだけではありません。

"group1"、 "group2"のようなものではなく、私がやっていることに応じて分かりやすい名前を使います。

Answer 2

トップレベルのdivにhboxという名前のクラスを与え、そのサブアイテムをターゲットにすることができます。例：http://jsfiddle.net/soparrissays/WJ2Lk/4/ HTML：

<div class="hbox"> 
    <input type="button" value="Button A" class="left-button" /> 
    <input type="button" value="Button C" /> 
    <input type="button" value="Button B" /> 
    <div class="clear"></div> 
</div> 

スタイル：

.hbox { 
    margin-top:45px; 
} 

.hbox input { 
    float: right; 
} 

.hbox .left-button{ 
    float:left; 
} 

.clear{ 
    clear:both; 
} 

これはあなたが探しているものですか？