Question

我有一个固定宽度的div，其中包含三个带有ids“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>

现在CSS：

  div.container_options {
        margin: 15px;
        clear: both;
        width: 980px;
    }


    fieldset.fieldset_first{
        width: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 0;
        margin-right: auto;
        float: left;
        margin-top: 10px;

    }

    .fieldset_first legend {
        font-weight: bold;
    }

    .fieldset_third{
        width: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: auto;
        margin-right: 0;
        float: right;
        margin-top: 10px;
    }

    .fieldset_third legend {
        font-weight: bold;
    }

    .fieldset_second {
        width: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: auto;
        float: right;
        float: left;
        margin-top: 10px;
    }

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

现在我将解决问题：
当显示所有三个场集时，一切都很好如果我隐藏正确的一切，一切都很好如果我隐藏左边的那个，中间的一个跳到左边而不关心margin: auto;

我在Stackoverflow上发现了一些似乎相似的问题：
    CSS: Positioning components using margins
    div won't center with margin: 0 auto;
    CSS Positioning Margin Trouble
我尝试了对他们有用的东西，但它们似乎对我不起作用。例如，一个答案说我在尝试使用保证金定位时不应该使用float属性。我创建了另一个JSFiddle，我试图这样做，但结果不是我想要的。我做错了什么？

Answer 1

如果您向所有字段集提供样式display: inline-block;，则第二个JSFIDDLE有效。

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;，因为这将从文档流中删除该元素。请改用visibility: hidden;。

Answer 2

我能想到的解决方案是列如下：

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

在这种情况下，如果您要隐藏display:none其中一个项目，他们会更改自己的位置，但您可以通过更改visibility:none或opacity:0来避免这种情况。

可以找到更多有关您的列样式的信息或属性here。

使用保证金在CSS中定位

2 个答案: