HTML / CSS Spacer（像Flex一样）

Question

我一直想知道是否有任何技术可以使用像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并排放置每个元素，而Spacer是一个不可见的元素; 100％的垫片与母体（HBox）的宽度不同，但填充剩余的空间;这意味着A将与左侧对齐，另外两个与右侧对齐。

现在在HTML / CSS中我会使按钮B和C向右浮动。我也必须将按钮的顺序颠倒到最终结果相同。此外，我可能会在“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浮动到左边，将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;
}

这就是你要找的吗？