0

我正在使用 Suzy 对现有网站进行部分重新设计。在第一阶段，我正在设计页面的顶部：标题等，其余部分使用遗留代码。

此时我需要将新标题适合旧页面内容。不幸的是，我最终得到的可用空间小于现有内容的宽度。

关于如何将内容空间（可用于放置在容器内的内容的宽度）#legacy-content-wrapper调整为 1002px 宽的任何想法？

这是我的代码：

$total-columns  : 12;             // a 12-column grid
$column-width   : 69px;           
$gutter-width   : 14px;           
$grid-padding   : 25px;            
$container-style: static;
// the resulting grid is 1032px wide

#header-wrapper {
  @include container;  
  .some-header-content { @include span-columns(3,12); }
  .some-other-header-content { @include span-columns(9 omega,12); }  
}

#page-wrapper {
  @include container;

  // legacy item, needs to be 1002px wide!
  #legacy-content-wrapper {

      @include span-columns(12 omega, 12);

      // my children will be 982px at 100% width

      // @include bleed($gutter-width) changes the width of the container
      // but does not change the size of the usable space within it.

      // how can I modify this item to have content swidth of 1002px?

  }
}

这就是我要找的：

<div id="page-wrapper">
    <div id="legacy-content-wrapper">
        <div>I'd like to be 1002 pixels wide!</div>
    </div>
</div>

我最终得到： 

#legacy-content-wrapper {
  margin: 0 0 -$grid-padding;
  padding: 22px 14px;
  @include clearfix;
}
4

1 回答 1

0

您可以调整任何网格设置以适应所需的空间。将网格大小修剪 30 像素的最直接方法可能是从grid-padding设置中。

$total-columns  : 12;
$column-width   : 69px;           
$gutter-width   : 14px;           
$grid-padding   : 10px;            
$container-style: static;

您也可以调整column-width或gutter-width设置以达到相同的数字。不看设计就很难说最好的方法。无论哪种方式都应该让你达到 1002 像素。

于 2013-08-27T00:07:48.040 回答