CSS在具有两到三列的响应式布局中包装不同数量的列 [英] CSS wrapping different numbers of columns in a responsive layout with two to three columns

问题描述

我想在一行中包装一些列样式div。然后应用overflow：hidden;到行，使任何浮动列在下一行中排列。

 < div class =row 
< div class =col>第1列< / div> 
< div class =col>第2栏< / div> 
< / div> 
< div class =row> 
< div class =col>第3列< / div> 
< div class =col>第4列< / div> 
< / div> 
< div class =row> 
< div class =col>第5列< / div> 
< div class =col>第6栏< / div> 
< / div> 
  

然后使用：

  .row {overflow：hidden; } 
 .col {
 width：50％; 
 float：left; 
} 
  

问题是，在更大的屏幕上，我想有效地移动行div所以我可以显示3列：

 < div class =row> 
< div class =col>第1列< / div> 
< div class =col>第2栏< / div> 
< div class =col>第3列< / div> 
< / div> 
< div class =row> 
< div class =col>第4列< / div> 
< div class =col>第5列< / div> 
< div class =col>第6栏< / div> 
< / div> 
  

并使用：

  .row {overflow：hidden; } 
 .col {
 width：33％; 
 float：left; 
} 
  

现在，我知道这不能在CSS中完成，任何其他方式的包装列或获得这个效果使用CSS，我可以使用？我想出的最好的是一个相当丑陋的版本使用额外的元素：

http://codepen.io/djave_co/pen/EIHzt

如果你调整屏幕大小，你可以看到它的工作，但它不是很整洁或语义。

解决方案

你想实现类似的东西吗？ - > http://codepen.io/anon/pen/LwutG

CSS

  .clear {clear：both;} b 
 $ b .col {
 border：2px solid #eaeaea; 
 min-height：20px; 
 margin-bottom：10px; 
 width：100％; 
 float：left; 
 box-sizing：border-box; 
} 
 
 
 @media屏幕和（max-width：1400px）{
 .col {
 width：33.333333％; 
} 
} 
 
 @media屏幕和（max-width：800px）{
 .col {
 width：50％; 
} 
} 
  

UPDATE >

在所有cols上设置高度相等。 http://jsfiddle.net/C86b8/

I'm trying to wrap some column style divs in a row. Then apply overflow:hidden; to the row to make whatever floated columns are in the next row line up.

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>
<div class="row">
    <div class="col">Column 3</div>
    <div class="col">Column 4</div>
</div>
<div class="row">
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
</div>

Then use:

.row{ overflow:hidden; }
.col{
    width:50%;
    float:left;
}

The problem is, on a larger screen I want to effectively move the row divs so I can show 3 columns:

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
</div>
<div class="row">
    <div class="col">Column 4</div>
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
</div>

And use:

.row{ overflow:hidden; }
.col{
    width:33%;
    float:left;
}

Now, I know this can't be done in CSS, but are there any other ways for wrapping columns or getting this effect using CSS which I can use? The best I've come up with is a rather ugly version using extra elements:

http://codepen.io/djave_co/pen/EIHzt

If you resize the screen you can see its working, but its not very neat or semantic.

解决方案

Do you want to achieve something like that? -> http://codepen.io/anon/pen/LwutG

CSS

.clear {clear: both;}

.col{
  border:2px solid #eaeaea;
  min-height:20px;
  margin-bottom: 10px;
  width:100%;
  float:left;
  box-sizing:border-box;
}


@media screen and (max-width:1400px) {
        .col {
     width: 33.333333%;
  }
}

@media screen and (max-width:800px) {
        .col {
     width: 50%;
  }
}

UPDATE

Set height equal on all cols. http://jsfiddle.net/C86b8/

这篇关于CSS在具有两到三列的响应式布局中包装不同数量的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！