定位在CSS使用餘量

我有包含三個字段集與IDS「第一」固定寬度一個div，「第二」，「第三」：定位在CSS使用餘量

現在我想他們定位如下：首先字段集，該左邊，第二個到中心，第三個到右邊。即使其中一個或所有其他人被隱藏，我也希望他們保持自己的位置，而不使用絕對或固定的職位。

在我告訴你我已經試過的東西之前，我會給你一些代碼。 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;

我發現＃2一些問題，似乎是相似的：
CSS: Positioning components using margins
div won't center with margin: 0 auto;
CSS Positioning Margin Trouble
我試過那些對他們有用的東西，但他們似乎不適合我。例如，一個答案表示，在嘗試使用保證金進行定位時，我不應該使用float屬性。我創建了另一個JSFiddle，我試圖做到這一點，但結果不是我想要的。我究竟做錯了什麼？

來源

2013-12-11 Jbartmann

第二個JSFIDDLE適用於所有字段集的樣式display: inline-block;。

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;。

來源

2013-12-11 10:11:01

感謝您的回答。我還有兩個問題需要解決：使用'display：inline-block'時，我必須使用CSS'visibility：hidden'而不是JavaScript'setAttribute（「hidden」，true）;'' 在您的解決方案中，中間字段集從頂部開始，而右側和左側從中間字段集的底部開始。所有三個人有可能從最高層開始？ – Jbartmann

使它們從頂部開始，您可以使用vertical-align：top;在你的fieldset上。對於JavaScript部分'可見性'是一個CSS屬性，所以你需要：your_element.style.visibility ='hidden'; – 2013-12-11 10:35:40

啊太棒了！現在這正是我想要的。謝謝！ :) – Jbartmann

，我能想到的解決方案是，看起來像這樣的列：

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

在這種情況下，如果你將與display:none的項目之一躲，他們將改變自己的地方，但你能避免即通過更改他們的visibility:none或opacity:0。

更多信息或屬性，您可以找到您的列的樣式here。

來源

2013-12-11 10:25:25

定位在CSS使用餘量

回答

相關問題