Создание макета сетки CSS с использованием вопроса DIV

Question

Я надеялся, что кто-то может указать, что я делаю неправильно с моим CSS/HTML.

Я заказываю свою личную замену Google/ig, поэтому вы знаете, для чего я собираюсь.

В коробках не должно быть гигантского пространства между рядами. Я прыгал, все коробки просто выстраивались между собой, как в последнем столбце справа.

Простите меня, CSS не моя сильная сторона. Если я собираюсь сделать все это неправильно, пожалуйста, во что бы то ни стало, обучите меня. Я здесь, чтобы учиться.

Любая помощь?

Это то, что я получаю

А с магией фотошопе, это то, что я хочу, чтобы это произошло.

Запуск Web Developer Div Размер инструмента, я получаю это:

Соответствующие 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/