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动态两个栏布局

回答

相关问题