html - 标题在 960gs 中的位置

Question

嗨。我使用 960gs(12 列)并尝试将标题放在底部的 Logo 之后。我发现的解决方案效果不太好，因为它将标题放在 Logo 下。

HTML:
    <div id="header" >
    <div class="container_12">
      <header>
        <div class="grid_4">
            <a href="index.html" title="Pagina principala - CRCE" rel="home">
                <img src="images/CRCE_logo.png" alt="logo CRCE"/>
            </a>
        </div>
        <div id="titlePosition"class="grid_10">
            <a href="index.html" title="" rel="home">
                <img src="images/titlu_crce.png" alt=""/>
            </a>
        </div>

</header>
</div>
</div> 

CSS:
  #header{
    background: #798AF7;
    background-repeat: repeat-x;
    height: 205px;
    overflow: visible;
    border-bottom: 30px solid #37459D;
    display: block;
   }
   #titlePosition{
    position: bottom;
    }   

Logo 在 4 列上，标题在 10 列上。此外，我会将语言选择器(选择器)和 FB Logo 放在右上角，所以我认为这是一个挑战。我也附上了一张图片以获取详细信息，看看我想如何看待最终的 header

Answer 1

我认为您不能以这种方式使用列，它的总和应为 12。

因为第一列的 Logo 与第二列重叠。将 Logo 列设为 2 列，标题设为 10 列。

<div class="grid-container">
 <div class="grid-2 logo-wrapper">
   <img class="logo" src="logo.jpg">
 </div>
 <div class="grid-10">
   <!-- Look how the grids can be nested further-->
   <div class="grid-container">
     <div class="grid-10 text-right"> Language selector</div>
     <div class="grid-10 text-right"> Facebook </div>
     <!-- You can use top margin -->
     <div class="top30px grid-12"> Title</div>
   </div>
 </div>
</div>

现在将 Logo 图像设置为绝对位置

.logo
{
 position:absolute;
 left:0;
 right:0;
}

然后为 .logo 周围的父级将其设置为 relative。

.logo-wrapper
 {
  position:relative;
 }

我已经给出了考虑伪网格系统的解决方案，因为我没有使用过 960gs - 网格系统。

总体思路:

可以认为下面3个元素在不同的行中占10列

1. 语言选择器

2. Facebook 图标和

3. 站点标题

提示:

• 避免标题的绝对位置，因为您可以通过 如上 HTML 所示的嵌套网格
• 使用上边距插入 标题进一步低于要求的位置。