我希望有人能指出我的 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;
}