CSS如何使用不同div的边距

Question

编辑：添加了Javascript和Masonry标签。我一直在寻找砌体和所有我的模块是相同的大小，所以我不知道砌体如何可以帮助我，因为我不想获得不同大小的元素排队。我仍在浏览砌体教程，因为目前有点混乱。如果这是修复，我为添加附加标签道歉。

我创建三个div离线，问题，然后去。我正在采取我称之为模块的内容，并将它们放在这三个div中。当我放置3个以上的模块时，他们会创建另一行。不幸的是，我的作品不能随模块一起移动，我必须手动进入并更改边距以将所有内容排成一行。我不确定如何根据问题行的数量在哪里改变。任何帮助将不胜感激。

<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格后显示任何内容，您还需要清除浮动。我不会在这里深入，但你可能想要查看clearfix课程。