javascript - CSS如何使用不同div的边距

Question

编辑:添加了 Javascript 和 Masonry 标签。我一直在研究砌体，我所有的模块都是相同的尺寸，所以我不确定砌体如何帮助我，因为我不想让不同尺寸的元素排列起来。我仍在浏览砌体教程，因为目前有点困惑。如果这是解决方法，我为添加额外的标签深表歉意。

我正在离线创建三个 div，问题，然后继续。我正在使用我所谓的模块并将它们放在这三个 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 float 到左侧。像这样:

<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 之后显示任何内容，您还需要清除 float 。我不会在这里深入，但你可能想查找 clearfix类。