使用边距在 CSS 中定位答案

【问题标题】：positioning in CSS using margin使用边距在 CSS 中定位
【发布时间】：2013-12-29 05:54:22
【问题描述】：

我有一个固定宽度的 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>

现在的 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 我试图这样做，但结果不是我想要的。我做错了什么？

【问题讨论】：

标签： javascript html css

【解决方案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;。

【讨论】：

感谢您的回答。我对您的解决方案还有两个问题：当使用 display: inline-block 时，我是否必须使用 CSS visibility: hidden 而不是 JavaScript setAttribute("hidden", true);？在您的解决方案中，中间字段集从顶部开始，而右侧和左侧从中间字段集的底部开始。有没有可能所有三个都从顶部开始？
要使它们从顶部开始，您可以使用 vertical-align: top;在您的字段集上。对于 javascript 部分，“可见性”是一个 CSS 属性，因此您需要： your_element.style.visibility = 'hidden';
啊太棒了！现在这正是我想要的样子。谢谢！ :)

【解决方案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找到更多信息或设置列样式的属性。

【讨论】：