html - HTML / CSSスペーサー(フレックスのような)

html css apache-flex

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

Flex / MXMLを使用すると、次のようになります。

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



flexがわからない場合は、このコードについて説明します。HBoxはその内部にすべての要素を並べて配置し、スペーサーは非表示の要素です。 100%のスペーサーは親(HBox)と同じ幅ではありませんが、残りのスペースを埋めます。これは、Aが左に配置され、他の2つが右に配置されることを意味します。


HTML / CSSでは、ボタンBとCを右にフロートさせます。また、ボタンの順序を逆にして、最終結果が同じになるようにする必要があります。その上、おそらく以下が空白にならないように、「clear:both」でいくつかの空白タグを配置します。

では、HTML / CSSで同じ機能を取得するためのテクニックはありますか? .HBox .VBox .Spacer CSSクラスをJavaScriptなしで作成できれば、それは素晴らしいことです。

前もって感謝します。
答え
私は次のようなマークアップを使用してこれと同様のことをします

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


次に、CSSを使用してスタイルを設定します。
group1を左に、float group2を右にフロートします。囲んでいるフォームラインには、フローティングが含まれています。ボタンは正しい順序で表示されます。ボタンを逆にする必要はありません。

これはすべて論理的/構造的なマークアップであり、さまざまな方法でスタイルを設定できます。プレゼンテーションのためだけではありません。

私は「group1」、「group2」のようなものではなく、自分のやっていることに応じて、わかりやすい名前を使用しています。
関連記事

html - キャンバス上の大きなフォントがChromeで長時間かかる

html - FacebookのサイトでのFB_HiddenContainer div要素の用途は何ですか?

jquery - クリックイベントを含む複数のドロップダウンメニュー

html - display:inlineを含むHTML liタグがIE7でブロックとして表示される

html - IEの頭痛-CSS:first-childセレクターが機能せず、Google Web Fontsを使用した奇妙な動作

android - 多数のテキスト行とスタイルを持つEditTextで2Dスクロールを有効にします

html - CSS / HTML:IE9 + jsFiddleの配置の問題

html - <TD>セルに背景画像が表示されない

html - cssでメニュー項目の幅を自動的に計算する

php - php / htmlにフレームのような構造を作成しますか?