0

编辑：添加了 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;
}

如果需要更多信息，请告诉我。感谢您的帮助！

4

1 回答 1

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

于 2013-08-30T21:51:18.710 回答