CSS動態兩個欄佈局

=====移動===== =====桌面上======

創建以下佈局 - --- [1] - - - - ----- [1] - - - - | - - - - [4] - - - -
----- [2] - - - - ----- [2] - - - - | - - - - [5] - - - -
----- [ 3] ----- ----- [3] - - - - | - - - - [6] - - - -
----- [ 4] -----
----- [5] - - - -
----- [6] - - - -

===== MOBILE == == =====打開桌面====

它們上面的佈局DOM結構將會是根據移動佈局順序，並且它是動態的，如果我從DOM [3]中刪除[2]應該取代[2]而不是[5]。我怎樣才能創建一個CSS佈局這些條件是否可以使用CSS創建？

來源

2015-04-06 Sudeep

將1,2,3放入一個div，4,5,6在第二。然後使用媒體查詢將包含的div從50％寬度切換到100％。如果你希望4在3被移除時迴流3點 - 這是另一個故事... – 2015-04-06 09:13:53

嗨瑞士先生，我試過這個http://jsbin.com/paduqupipa/1/edit?html,css,output，它的失敗，我想回流4在3的位置迴流，我怎麼能使它成爲可能你指導我？（也嘗試使用bootstrap，但似乎不適用於我的問題。row> .col-sm-6 + .col-xs-12 * 2）。 – Sudeep 2015-04-06 09:24:32

@SwissMister，我感興趣的是你提到的另一個故事:)，你能指導我一些觀點嗎？ – Sudeep 2015-04-06 10:44:33

您可以使用Google Web Developers提供的this指南。似乎做你想做的事。

來源

2015-04-06 09:23:15 msc

你可以CSS columns，這是專門爲這樣的佈局意圖而設計的。

CSS列：http://jsfiddle.net/teddyrised/6bz4a0ox/

使用下列標記：

<div class="container"> 
    <div class="wrapper"> 
     <label for="">label</label> 
     <input type="text" placeholder="[1]"> 
    </div> 
    <!-- more --> 
</div>

而對於CSS，我們確保我們聲明都列數（也就是2，因爲你一直想）與最小列寬。我實際上會建議這樣做，而不是針對移動與桌面，因爲流動/響應佈局應該迎合內容而不是設備：

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 
.container { 
    -webkit-columns: 2 200px; 
     -moz-columns: 2 200px; 
      columns: 2 200px; 
    -webkit-column-gap: 1em; 
    -moz-column-gap: 1em; 
      column-gap: 1em; 
} 
.wrapper { 
    overflow: hidden; 
    padding: .5em; 
} 
.wrapper label { 
    float: left; 
    width: 50px; 
} 
.wrapper label + input { 
    float: left; 
    width: calc(100% - 50px); 
}

來源

2015-04-06 09:37:35 Terry

嗨@terry，我測試了你的代碼，發現了一個問題，我從標記中刪除了[2]元素，現在瀏覽器在下一列渲染[4]輸入框底部，有什麼方法可以修復？http ：//jsfiddle.net/sharpshooter1990/27ygfwpr/1/這裏是測試版本。 – Sudeep 2015-04-06 10:42:45

這是預期的行爲。該列從左向右流動內容，因此在向右移動之前會填充左側的空格。 – Terry 2015-04-06 10:59:46

列目前似乎[非常有限的瀏覽器支持]（http://caniuse.com/#feat=multicolumn）。所以這取決於你的環境（內網可控瀏覽器軟件版本與寬互聯網等）。 – 2015-04-06 16:54:33

CSS動態兩個欄佈局

回答

相關問題