CSS wrapping different numbers of columns in a responsive layout with two to three columns

问题

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.

回答1:

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/

来源：https://stackoverflow.com/questions/19584624/css-wrapping-different-numbers-of-columns-in-a-responsive-layout-with-two-to-thr