Firefox 如何使列的宽度均匀？

我对XUL的“盒子模型”布局感到非常困惑。
我想制作一个类似表格的元素布局。
布局应包括一行三列。
列的宽度应相同，并占据页面的整个宽度。
我将在列中放置不同的元素，但列的宽度应保持不变 元件应具有正常尺寸，而不是拉伸。
例如，第一列为空，第二列包含图像，第三列包含按钮。
我如何才能做到这一点？
我尝试了长方体和网格，但这些列似乎具有任意宽度。
谢谢。

这不起作用：

<grid>
<columns flex="1">
  <column/>
  <column/>
  <column/>
</columns>
<rows>
  <row>
  <spacer flex="1"/>
  <image src="MyImage.png"/>
  <button id="MyButton" label="MyButton"/>
  </row>
</rows>
</grid>

---

指定每列的最小和最大宽度，并使网格中的每个单元格成为一个特定于宽度的宽度和高度。大概是这样的：

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
    <grid>
    <columns flex="1">
        <column maxwidth="100" minwidth="100"/>
        <column maxwidth="100" minwidth="100"/>
        <column maxwidth="100" minwidth="100"/>
    </columns>
    <rows>
        <row>
            <hbox maxwidth="100">
                xxxx xxxxxxxx xxxx xxxxx xxxxxxxx xxxxxxxx
            </hbox>
            <hbox maxwidth="100" minwidth="100" maxheight="10">
                <button id="MyButton1" label="MyButton1"/>
            </hbox>
            <hbox maxwidth="100" minwidth="100" maxheight="30">
                <button id="MyButton1" label="MyButton2"/>
            </hbox>
            <hbox maxwidth="100" minwidth="100" maxheight="40">
                <button id="MyButton3" label="MyButton3"/>
            </hbox>
        </row>
    </rows>
    </grid>
</window>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

在Xul中，宽度和长度属性始终以像素为单位。不能像css那样指定百分比。这意味着您必须提前知道页面宽度，并相应地指定宽度，如果您希望列的间距均匀并延伸到页面宽度

还有一种方法。使用以下命令：

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
    <grid>
        <columns>
                <column flex="1"/>
                <column flex="1"/>
                <column flex="1"/>
        </columns>
        <rows>
            <row>          
                <button label="MyButton1"/>          
                <button label="MyButton2"/>           
                <button label="MyButton3"/>  
            </row>
        </rows>
    </grid>
</window>

要创建此项，请执行以下操作：

---

按钮/列将随着窗口大小的更改而调整。

我建议在列元素上使用带有flex=“1”的组合

    <columns equalsize="always">
        <column flex="1">
        ...

...

应付单据

---

您还可以在行上使用equalsize=“always”，这是在Thunderbird Lightning日历布局中实现的方法

您必须执行XUL吗？您可以改为加载XHTML页面吗？XHTML提供了XUL的所有本地化功能，但也提供了HTML的所有灵活性。以github.com/Noitidart/ZooniverseXpertWith HTML为例，它很容易让人理解，我们可以使用这个灵活的系统创建均匀宽度的列--但是如果你想坚持使用XUL，同样的规则也适用，这可能有点难以理解，因为默认情况下，元素不是位置内联/块，它们是一种长方体。谢谢你的帮助。我想有不同的方法来解决这个问题，但在这个特殊的例子中，我试图理解XUL，所以问题是：用XUL做这件事是可能的，还是根本不可能？是的，这是非常可能的。灵活的css系统我认为是受到XUL的启发。我会仔细查看你的代码，稍后发布解决方案，现在不在家。谢谢，我会等你。嗨，查克·贝克。谢谢你的帮助。不幸的是，窗户的宽度事先不知道。我可以用JavaScript调整大小，但问题的想法是创建一个布局，根据窗口的宽度进行自我调整。比如说，三个flex='1'按钮的宽度相同，占据了所有可用空间。嗨，恰克。再次感谢。这就是我所说的理想效果应该是什么样子。但是，当我将一个按钮替换为分隔符，将另一个按钮替换为图像时，列不再保持相同的宽度，尽管它们的flex属性相同。这似乎与人们的预期相反。@GreenBear通过在每个元素上设置flex=1，您不需要知道宽度。您可以将此代码复制粘贴到这个在线xul测试仪中--您需要先使用此插件将ted.mielczarek.org添加到白名单中-嗨，Noitidart。感谢您对在线xul测试仪的建议。我没有收到你建议我检查的代码？