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浮动到左边。像这样：

<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类。

CSS如何使用具有不同div的边距

1 个答案: