HTML/CSS间隔符（如Flex'；s）

我一直在想，是否有任何技术可以像Flex/MXML那样使用HTML/CSS。我的意思是，在MXML中，HBox、VBox和间隔子是全局使用的，它们的行为是可预测的。但是在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将向左对齐，另外两个将向右对齐

现在在HTML/CSS中，我将使按钮B和C向右浮动。我还必须颠倒按钮的顺序，以使最终结果相同。此外，我可能会在一些空白标签上加上“clear:tware”，以确保下面的内容不会被弄乱

那么，有什么技术可以在HTML/CSS中获得相同的功能呢？如果我们可以创建.HBox.VBox.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来设置样式。 我会把第一组浮到左边，把第二组浮到右边。封闭的formline包含其中的浮动。按钮按正确的顺序显示，我不必反转它们

这是所有逻辑/结构标记，可以以不同的方式设置样式；它不只是为了展示

---

根据我的工作，我使用合理的名称，而不是像“group1”、“group2”这样的名称。

你可以给你的顶级div一个名为hbox的类，并针对它的子项。例子： html:

---

这就是你要找的吗

Flex使用“垫片”？哎哟。（“间隔符”是处理HTML布局的一种相当过时的方法。Flex使用它们让人伤心/惊讶/也许不那么惊讶）您可能是对的。但是HTML+CSS的方式更糟糕，例如：float应该只用于周围有文本的图像。我编写代码是为了获得与上述文本相同的结果，检查MXML代码是否更加干净和客观？间隔符破坏了HTML、CSS和JS的MVC结构。@Eric.Void恰恰相反。间隔符不是内容…因此甚至不属于xml/html…因此CSS的好处。好吧，我试图得到的一点是（除了间隔符的概念争议之外）MXML非常直接和可预测。在HTML/CSS中（除了它的强大功能之外），人们必须驯服和支配或多或少的所有技巧和解决方法。最后，我的问题是：有没有办法克服HTML/CSS的所有这些技巧和变通方法，使其更加客观和可控？我认为*正在破坏一切。您不需要浮动br。这是我做的新叉子：。我在上面的回答中也贴了一张照片。如果你也发布一张你希望它看起来像什么的图片，这可能会有所帮助。正如你们所知，按钮和输入一样工作。Eric希望左/右并排，中间留有间隙，而不是堆叠。Flex中的

提供了一个“灵活的空间”，可以根据需要扩展以填充行并将其同级推到左侧和右侧。此外，浮动功能强大且经常使用的原因是，页面可以根据不同的浏览器宽度等进行很好的调整。替代方法包括固定/绝对定位样式（但如果你问我的话，这对整个网站来说不是一个好的解决方案。另一个选择是使用完全由javascript创建的样式。这也不是一个坏的解决方案。@Eric-我看了你的小提琴，基本上就是这么做的。我不需要额外的空div，因为在我们的表单结构中，每个“formline”后面是可以清除

的其他内容：两者都清除。“formline”它本身有一个明确的定义，对我们来说，最常见的情况是一个表单行后跟另一个表单行。我们的解决方案是相同的ha。HTML/CSS中一个有趣但很好的经验法则是，如果它不起作用，请添加更多div。这听起来很糟糕，但有点有效。如果你想保持语法简洁，可以使用JS替换部分页面。
<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;
}