CSS Как использовать поля с разными divs

Question

Редактировать: Добавлены теги Javascript и масонства. Я смотрю на кирпичную кладку, и все мои модули имеют одинаковый размер, поэтому я не уверен, как каменная кладка может помочь мне, поскольку я не пытаюсь заставить элементы разного размера выстраиваться в линию. Я все еще просматриваю уроки каменной кладки, так как сейчас это немного запутанно. Если это исправление, я приношу свои извинения за добавление дополнительных тегов.

Я создаю три divs в автономном режиме, вопросы, а затем идите. Я беру то, что я называю модулями, и помещаю их в эти три div. Когда я помещаю более 3 модулей, они создают еще одну строку. К сожалению, мои титры не двигаются вместе с модулями, и мне приходится вручную входить и менять margin-top, чтобы выровнять все. Я не уверен, как сделать так, чтобы строки проблем изменились в зависимости от количества модулей. Любая помощь будет принята с благодарностью.

<div class="grid_17"> 
     <div id="offlinetitle"> 
<p>System is Offline</p> 
      </div> 

     <div id="issuestitle"> 
    <p>System is partially offline or experiencing issues</p> 
     </div> 

     <div id="issuescontents"> 
      <a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none"> 
      <div class="grid_3"> 
        <p id="contexttitle">Access</p> 
       <p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p> 
       </div> 
      </a> 

<div id="AccessModal" class="reveal-modal"> 
     <h1>Access</h1> 
     <p>This is text to describe something> 
        <p4>Last Update: 08/30/2013 5:00pm</p4> 
     <a class="close-reveal-modal">&#215;</a> 
    </div> 
         </div>  

     <div id="gotitle"> 
      <p>All systems go</p> 
     </div>    

    </div> 

Мой CSS выглядит следующим образом сетка 17 является родительским контейнером, в котором все находится в последнем контейнере, это фактические модули.

.grid_17{ 

} 

#offlinetitle{ 
color:#FFF; 
font-size:25px; 
background:#F00; 
height: 35px; 
text-decoration:none; 
list-style:none; 
} 

#issuestitle{ 
color:#FFF; 
font-size:25px; 
background:#FC0; 
height: 35px; 
text-decoration:none; 
list-style:none; 
margin-top:15px; 
} 

#gotitle{ 
color:#FFF; 
font-size:25px; 
background:#093; 
height: 35px; 
text-decoration:none; 
list-style:none; 
margin-top:535px; 
} 
.container_24 .grid_3 { 
    width: 213px; 
    background:#CCC; 
    height:55px; 
    margin-top:10px; 
} 

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать. Спасибо за помощь!

Answer 1

Вам нужно обернуть каждый «модуль» (заголовок и содержимое) в свой собственный div, а затем поместить этот родительский div влево. Что-то вроде этого:

<div class="grid_17"> 
    <div> 
     <div id="offlinetitle">...</div> 
    </div> 

    <div> 
     <div id="issuestitle">...</div> 
     <div id="issuescontents">...</div> 
    </div> 

    <div> 
     <div id="gotitle">...</div> 
    </div> 
</div> 

С помощью CSS аналогично:

.grid_17 { width: 300px; } 
.grid_17 > div { float: left; width: 100px; height: 100px; } 

Примечание о clearfix: Если вы показываете что-либо после grid_17 DIV, вам также нужно очистить поплавок. Здесь я не буду углубляться, но вы можете посмотреть класс clearfix.