Susy 2：固定宽度的侧边栏与流体主要内容区域 [英] Susy 2: Fixed width sidebar with fluid main content area

问题描述

使用Susy 2（候选版本），我试图找出如何使用固定宽度的侧栏创建简单的流体布局 - 无论是左侧位置还是右侧 - 我很高兴使用第一个和最后一个关键字。任何人都可以给我任何关于如何在Susy 2中执行此操作的指针？

谢谢！

解决方案

根据您自己的具体情况，有几种混合固定/流体布局的方法。

1. 隔离边栏。

   
   
   

   浮动隔离非常酷保持浮动相互独立的方式。

     .side {
    @include span（3 static isolation）; 
   } 
    
    .main {
    @include full; 
    padding-left：span（3 static wide）; 
   } 
    
    //或... 
    
    .main {
    margin-left：span（3 static wide）; 
   } 
     

   span（3 static）将跨越3列，使用您的列宽设置/单位。添加 isolate 会设置负右边距，以防止其占用横向空间。添加宽，将在该宽度中包含一个额外的装订线。您也可以使用任意宽度，例如 200px 。这取决于你。

如果安全从流程中移除边栏，有时候最简单的方法是将其定位，并在主内容中添加相同的填充。使用Susy 2，可能看起来像这样：

  .side {
 position：absolute; 
剩下：0; 
 top：0; 
 width：span（3 static）; 
} 
 
 .main {
 padding-left：span（3 static wide）; 
} 
  




2. 使用布局上下文hack。
   $ b

   还有一些方法可以创建新的布局上下文，以填充浮动后的剩余空间。最简单的是 overflow：hidden;

     .side {
    @include span（3 static）; 
   } 
    
    .main {
    overflow：hidden; 
   } 
     

   如果您因任何原因需要溢出，还有其他的技巧，有其他的hackey缺点，像这样：
   
   

     .main {
    display：table-细胞; 
    vertical-align：top; 
    width：10000px; 
   } 
     

Using Susy 2 (release candidate), I'm trying to figure out how to create a simple fluid layout with a fixed width sidebar - either left position or right - I'm happy using the first and last keywords. Can anyone give me any pointers on how to do this within Susy 2?

Thank you!

解决方案

There are a few ways to mix fixed/fluid layouts, depending on your own specific case.

1. Isolate the sidebar.

   Float isolation is a cool a way of keeping floats independent from each other.

   .side {
     @include span(3 static isolate);
   }
   
   .main {
     @include full;
     padding-left: span(3 static wide);
   }
   
   // or...
   
   .main {
     margin-left: span(3 static wide);
   }
   

   span(3 static) will span 3-columns, using your column-width setting/units. Adding isolate will set negative right margins, to keep it from taking horizontal space. Adding wide, will include an extra gutter in that width. You could also use arbitrary widths like 200px instead. It's up to you.

2. Remove the sidebar from the flow entirely.

   If it's safe to remove the sidebar from the flow, it is sometimes simplest to position it absolutely, and add equal padding to the main content. Using Susy 2, that could look something like this:

   .side {
     position: absolute;
     left: 0;
     top: 0;
     width: span(3 static);
   }
   
   .main {
     padding-left: span(3 static wide);
   }
   

3. Use a layout-context hack.

   There are also ways to create a new layout context that will fill the remaining space after a float. The simplest of those is overflow: hidden;

   .side {
     @include span(3 static);
   }
   
   .main {
     overflow: hidden;
   }
   

   The downside of that is if you need to overflow for any reason. There are other techniques, that have other hackey downsides, like this one:

   .main {
     display: table-cell;
     vertical-align: top;
     width: 10000px;
   }
   

这篇关于Susy 2：固定宽度的侧边栏与流体主要内容区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！