Question

HY。我使用960gs（12列），并尝试将标题放在标识的底部。我找到的解决方案并不太好，因为它将标题置于徽标下。

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;
    }

徽标位于4列，标题位于10列。此外，我会将语言选择器（选择器）和FB徽标放在右上方，所以我认为这是一个挑战。我也附上了一张图片了解详情，看看我想看看最后的header

Answer 1

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

因为第一列的徽标与第二列的徽标重叠。将您的徽标列设为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
{
 position:absolute;
 left:0;
 right:0;
}

然后，.logo周围的父级将其设置为相对。

.logo-wrapper
 {
  position:relative;
 }

我已经考虑了伪网格系统，因为我没有使用960gs - 网格系统。

一般理念：

您可以认为以下3个元素位于不同的行中，占据10列

语言选择器
Facebook图标和
网站标题

<强>提示：

避免标题的绝对位置，因为您可以实现它嵌套网格，如上面的HTML
使用上边距推动标题进一步低于所需职位。

标题的位置在960gs

1 个答案: