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


如果需要更多信息,请告诉我。谢谢您的帮助!

最佳答案

您需要将每个“模块”(标题和内容)包装在自己的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类。

关于javascript - CSS如何在不同的div上使用边距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18541869/

10-12 12:25
查看更多