CSS浮动Div问题

Question

Please take a look at the picture provided above, each box is a div which is working fine, but in some cases the div labelled "BIG BOX" creates some free space on each line.

Is there is anyway to fill the free area with my current css setup:

.topic_box_small{
     z-index:3;

    outline: red solid 1px;
    display: block;
    position: relative;
    float:left;
    width:115px;
    height:115px;
    overflow: no-content;
    background-color: burlywood;
    box-shadow: #999999 0px 0px 2px  ;
    border-radius:5px;
    margin:5px;
}
.topic_box_medium{
    z-index:3;
    outline: red solid 1px;
    display: block;
    position: relative;
    float: left;
    width:240px;
    height:115px;
    overflow: no-content;
    background-color: palegreen;
    box-shadow: #999999 0px 0px 2px  ;
    border-radius:5px;
    margin:5px;

}
.topic_box_large{
   z-index:3;
    outline: red solid 1px;
    display: block;
    position: relative;
    float: left;
    width:240px;
    height:240px;
    overflow: no-content;
    background-color: orange;
    box-shadow: #999999 0px 0px 2px  ;
    border-radius:5px;
    margin:5px;
}
.category_Heading{
    z-index:3;
    display: block;
    position: relative;
    width: 100%;
    text-height: 20px;
    padding: 5px;
    font-size: 15px;
    text-align: center;
    clear:both;
    background-color: #fff;
    color:brown;
    box-shadow: #999999 0px 0px 2px  ;
}
.topic_Wrapper{
    display: block;
    width: auto;
    height: auto;
    margin: 5px;
}

HTML

<section  class="content_packet">
    <h2 class="category_Heading">Category 1 </h2>
    <div class="topic_Wrapper" >
        <div   class="topic_box_medium"> <P>MEDIUM BOX<P> </div>
        <div   class="topic_box_medium"> <P>MEDIUM BOX<P> </div>
        <div   class="topic_box_large"> <P>BIG BOX<P> </div>
        <div   class="topic_box_large"> <P>BIG BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
        <div   class="topic_box_mini"> <P>MINI BOX<P> </div>
    </div>
    <h2 class="category_Heading">Category 1 </h2>
    <div class="topic_Wrapper" >
        <div   class="topic_box_large"> </div>
        <div   class="topic_box_large"></div>
        <div   class="topic_box_mini"></div>
        <div   class="topic_box_mini"> </div>
        <div   class="topic_box_normal"> </div>
        <div   class="topic_box_medium"></div>
        <div   class="topic_box_mini"></div>
        <div   class="topic_box_mini"> </div>
    </div>
</section>

Answer 1

You can use more than one CSS class in your tags, Just add a space between them like so.

<div class="CSS-Class1 CSS-Class-2 CSS-Class-3">...</div>

CSS:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* force scrollbar, prevents initial gap */
html {
  overflow-y: scroll; 
}

body {
  font-family: sans-serif;
}

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

/* 5 columns, percentage width */
.grid-item,
.grid-sizer {
  width: 20%;
}

.grid-item {
  float: left;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 40%; }
.grid-item--height2 { height: 200px; }

HTML

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

The Masonry layout is the way to go as said in the comments, but because you want to have different widths you will have to use some java-script.

Here is a good site to look at. http://isotope.metafizzy.co/layout-modes/masonry.html

And a Codepen Example to see how it works. http://codepen.io/desandro/pen/sqrwo

Hope this helps

Answer 2

This post may help you. Where you can calculate tallest div and set the same height for each div.