HTML/CSS Spacer(类似 Flex 的)

Question

我一直想知道是否有任何技术可以像 Flex/MXML 一样使用 HTML/CSS。我的意思是，在 MXML 中，HBox、VBox 和 Spacer 是全局使用的，并且它们的行为是可预测的。但是在 HTML/CSS 中我们使用了很多 float ，它总是有一些“隐藏的惊喜”。

使用 Flex/MXML 我会这样做:

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

• 如果你不知道 flex，我解释一下这段代码:HBox 将其中的每个元素并排放置，而 Spacer 是一个不可见的元素； 100% 的 spacer 与父级 (HBox) 的宽度不同，但它填充了剩余的空间；这意味着 A 将向左对齐，另外两个向右对齐。

现在在 HTML/CSS 中，我会让按钮 B 和 C float 到右边。我还必须颠倒按钮的顺序才能使最终结果相同。此外，我可能会用“clear:both”放置一些空白标签，以确保下面的任何内容都不会被弄乱。

那么，是否有任何技术可以在 HTML/CSS 中获得相同的功能？如果我们可以制作 .HBox .VBox .Spacer CSS 类而不使用 javascript，那就太棒了。

提前致谢。

Answer 1

我使用以下类型的标记做了类似的事情

<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 float 到右侧。封闭的 formline 包含其中的 float 。按钮以正确的顺序出现，我不必颠倒它们。

这都是逻辑/结构标记，可以用不同的方式设置样式；它不仅仅是为了演示。

我根据自己的工作使用合理的名称，而不是“group1”、“group2”之类的名称。