logo标签列表

CSS浮动div的问题

htmlcsstiles
3
请查看上面提供的图片，每个方框都是一个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>
1
请添加完整的代码，因为您在HTML标记中的顺序很重要。 - user4039781
1
你正在尝试实现砖墙布局。请尝试使用 column-count。 - m4n0
2
你尝试过使用像“JQuery Nested”、“Shapeshift”或“Gridster”这样的jQuery插件吗？ - Padhraic
@Manoj Kumar 确切地说，就是那个布局。 - Sajan
@Padhraic无法使用外部JS、CSS库，因为这是一项学校作业。 - Sajan
1
我希望在大学时期能够有 Stack Overflow。 - Padhraic
2个回答
4
你可以在标签中使用多个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>

砖石布局是最好的选择，正如评论中所说，但由于您想要不同的宽度，您将需要使用一些JavaScript。
以下是一个很好的网站供参考。 http://isotope.metafizzy.co/layout-modes/masonry.html 还有一个Codepen示例以了解其工作原理。 http://codepen.io/desandro/pen/sqrwo 希望这可以帮到您。
1

这篇文章可能会对您有所帮助。其中可以计算最高的div并为每个div设置相同的高度。

请避免仅提供链接的答案。如果帖子的一部分确实有帮助，请复制相关部分。然而，如果像我怀疑的那样，这意味着这个问题已经被回答了，请将其标记为重复。 - Mr Lister
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接