html - 960 网格系统 - 难以实现所需的布局

标签 html css 960.gs

我目前正在设计我的网页的一部分,但在定位联系人卡片时遇到了困难,如下所示:

enter image description here

目前,由于以下标记结构,第二列联系人卡片未垂直对齐。 <h2 class="text200 margbottom margtop">Contact Us</h2>正在垂直向下“插入”第一个网格 4 中的其他 2 张接触卡,但当然这不会发生在第二个网格 4 中,因为没有 <h2>存在。有没有什么方法可以通过修改我的 HTML 标记将名片放置在相同的高度,以便它们水平对齐,如上图所示?

这是链接:http://www.bestcastleintown.co.uk/pg/

<div class="grid_4">
    <h2 class="text200 margbottom margtop">Contact Us</h2>
    <div class="contact_block_tiny trophy clearfix">
    <!-- content -->
    </div>
    <div class="contact_block_tiny target clearfix">
    <!-- content -->                                                
    </div>
</div>      
<div class="grid_4 omega">
    <div class="contact_block_tiny drink clearfix">     
    <!-- content -->                                    
    </div>
    <div class="contact_block_tiny editorial clearfix"> 
    <!-- content -->                                        
    </div>
</div>  

最佳答案

“联系我们”是第一栏还是两栏的标题?如果它是两列的标题,那么为什么将它放在第一列中?这不是它在语义上所属的位置,因此会破坏您的布局。

关于html - 960 网格系统 - 难以实现所需的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16011479/

相关文章:

html - Bootstrap 下拉菜单导航重叠/重叠在下面的内容上

CSS3 缩放不工作

html - <video> 标签在右侧添加 3px 的空白

Javascript 函数在第二次尝试时不会进入下一个列表

css - 具有 html/css 背景的 Div

php - Symfony KNP Snappy bundle : PDF does not load css file

javascript - 将节点从不同数组移动到一个数组,然后再次将其移动到angularjs中的父数组

css - IE8 和 IE9 无法正确呈现 960 网格

css - 自定义CSS生成器流体CSS和流体960网格系统之间的区别

html - 适合 Firefox 的 960.gs 插件?