0

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

在此处输入图像描述

目前,由于以下标记结构,第二列联系人卡片未垂直对齐。这<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>  
4

1 回答 1

1

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

于 2013-04-15T09:13:46.380 回答