使用DIV问题生成CSS网格布局

Question

我希望有人可以指出我的CSS / HTML出错了。

我正在推出自己的个人Google / ig替代品，因此您知道我的目标。

盒子之间不应该有巨大的空间。我正在跳过所有的盒子，就像右边最后一栏的做法一样。“

原谅我，CSS不是我的强项。如果我说这一切都错了，请一定要学习我。我在这里学习。

任何帮助？

这就是我得到的

凭借photoshop的魔力，这就是我想要发生的事情。

运行Web Developer Div Size Tool，我明白了：

相关HTML

每个网站都会重复widget-container次。然后循环li以生成ul

<div id="content">

<--! Begin repeated content →
    <div id="widget-container">

    <div id="widget-head">
      <h3><a href="#" target="_blank">FEED TITLE</a></h3>
      <div id="widget-edit">EditButton</div>
    </div>

    <div id="widget-content">
      <ul id="widget-feeds">

        <li>
        <a href="#" onclick=""> <img src="images/icons/hidden.gif"> </a> 
        <a href="#" target="_blank" title="" >Feed Link</a>
        <div class="widget-desc"> Content Here </div>
        </li> 

        <li>
        <a href="#" onclick=""> <img src="images/icons/hidden.gif"> </a> 
        <a href="#" target="_blank" title="" >Feed Link</a>
        <div class="widget-desc"> Content Here </div>
        </li>

        <li>
        <a href="#" onclick=""> <img src="images/icons/hidden.gif"> </a> 
        <a href="#" target="_blank" title="" >Feed Link</a>
        <div class="widget-desc"> Content Here </div>
        </li>

      </ul>

    </div>
    <div class="fclear"></div>
  </div>
</div>

以及相关的CSS文档

@charset "UTF-8";
/* CSS Document */

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */

body {
    font-size: 0.8em;
    font-family: Arial,Verdana,Sans-Serif;
    background-color: #FFF;
}
a {
    color: #36C;
}
.hidden {
    display: none;
}

.fclear {clear:both}

#content #widget-container {
    width: 30%;
    background-color: #ddd;
    float: left;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 25px;
    white-space: nowrap;
    display: block;
}
#content #widget-container #widget-head {
    height: 25px;
    padding: 5px;
    overflow: hidden;
    line-height: 25px;
}
#content #widget-container #widget-head h3 {
    font-size: 14px;
    width: 90%;
    float: left;
}
#content #widget-container #widget-head #widget-edit {
    float: right;
    width: 12px;
    padding-top: 5px;
}
#content #widget-container #widget-content {
    background-color: #FFF;
    margin: 1px;

}
#content #widget-container #widget-content #widget-feeds {

}
#content #widget-container #widget-content #widget-feeds ul {
overflow: auto;
}
#content #widget-container #widget-content #widget-feeds li {
    display: block;
    white-space: normal;
    word-wrap: normal;
    margin-bottom: 0 !important; 
    padding: 4px 0 9px 0 !important;
}
#content #widget-container #widget-content #widget-feeds li a {


}
#content #widget-container #widget-content #widget-feeds li .widget-desc {
    white-space: normal;
    display: none;
    margin-bottom: 4px;
    padding-top: 2px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 15px;
    overflow: hidden;
}

Answer 1

所有关于元素围绕空间的方式：

请注意，最高元素定义了创建不一致的行高。

我所要做的就是设置一个标准高度，因此一切都将完美对齐。

如果您热衷于填补空白，可能需要查看以下JS插件：

http://masonry.desandro.com/