Javascript CSS中使用边距的定位

我有一个固定宽度的div，它包含三个ID为“first”、“second”、“third”的字段集：

现在我希望他们的位置如下：第一个字段设置在左边，第二个字段设置在中间，第三个字段设置在右边。我希望他们即使在一个或所有其他人都被隐藏的情况下也能保持自己的位置，而不使用绝对或固定的位置

在我向你展示我已经尝试过的东西之前，我会给你一些代码。HTML优先：

 <div class="container_options">
                <fieldset class="fieldset_first" id="first">
                    <legend>Konfiguration des offenen Endes</legend>
                </fieldset>
                <fieldset class="fieldset_second" id="second">
                    <legend>Verfügbare Optionen für Ihr Kabel</legend>

                </fieldset>
                <fieldset class="fieldset_third" id="third">
                    <legend>Konfiguration des offenen Endes</legend>
                </fieldset>
    </div>

您可以在下面测试此代码，并可以隐藏/显示字段集，以查看它们的行为

现在我来讨论这个问题：
当所有三个字段集都显示时，一切正常。
如果我藏对了，一切都好。
如果我隐藏左一个，中间一个跳到左边，不关心

边距：auto

我在Stackoverflow上发现了一些类似的问题：







我尝试了对他们有用的东西，但它们似乎对我不起作用。例如，一个答案是，当我试图用边距定位时，不应该使用
float
属性。我创造了另一个，我试图这样做，但结果不是我想要的。我做错了什么？
如果给所有字段集设置样式
display:inline块，则第二个选项有效

fieldset.main_options_plug1{
    width: 300px;
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 0;
    margin-right: auto;
   /* float: left; */
    margin-top: 10px;
    display: inline-block;
    vertical-align: top; 
    visibility: hidden;
}

然后，当您想要隐藏其中一个字段集时，您不能使用
display:none可见性：隐藏取而代之
 我能想到的解决方案是这样的列：

.container-options{ 
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    }

在这种情况下，如果您将使用其中一个项目隐藏
display:none
，它们将更改其位置，但您可以通过更改其
可见性：none
或
不透明度：0
来避免这种情况

您可以找到更多有关列样式的信息或属性。
谢谢您的回答。我还有两个问题需要解决：当使用
display:inline block
时，我是否必须使用CSS
visibility:hidden
而不是JavaScript
setAttribute（“hidden”，true）？在您的解决方案中，中间字段集从顶部开始，而右侧和左侧从中间字段集的底部开始。有可能所有三个都从顶部开始吗？要使它们从顶部开始，可以使用垂直对齐：顶部；在你的场地上。对于javascript部分，“可见性”是一个css属性，因此需要：your_element.style.visibility='hidden'；啊，太好了！现在这正是我想要的。谢谢！：）
.container-options{ 
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    }