html - CSS float Div 问题

Question

请查看上面提供的图片，每个框都是一个工作正常的 div，但在某些情况下，标记为“BIG BOX”的 div 在每行上创建了一些空闲空间。

有没有办法用我当前的 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

您可以在标签中使用多个 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>

如评论中所述，Masonry 布局是可行的方法，但由于您想要不同的宽度，您将不得不使用一些 java 脚本。

这是一个值得一看的好网站。 http://isotope.metafizzy.co/layout-modes/masonry.html

还有一个 Codepen 示例来了解它是如何工作的。 http://codepen.io/desandro/pen/sqrwo

希望对你有帮助