CSS Плавающий Div Проблемы

Question

Пожалуйста, обратите внимание на картину, представленной выше, каждая коробка представляет собой ДИВ, который работает отлично, но в некоторых случаях ДИВ меченых «BIG BOX» создает свободное пространство в каждой строке ,

Есть в любом случае, чтобы заполнить свободную область с моей текущей настройки CSS:

.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

This пост может помочь вам. Где вы можете рассчитать самый высокий div и установить ту же высоту для каждого div.

Answer 2

В ваших тегах можно использовать более одного класса CSS. Просто добавьте пробел между ними.

<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> 

Компоновка масонство путь, как говорится в комментариях, а потому, что вы хотите иметь разную ширину вы будете необходимо использовать некоторый java-скрипт.

Вот хороший сайт для просмотра. http://isotope.metafizzy.co/layout-modes/masonry.html

И пример Codepen, чтобы увидеть, как это работает. http://codepen.io/desandro/pen/sqrwo

Надеется, что это помогает