Susy 2:具有流动主要内容区域的固定宽度侧边栏

2022-01-18 00:00:00 grid css sass susy-compass fixed-width

使用 Susy 2(候选发布版)，我试图弄清楚如何使用固定宽度的侧边栏创建简单的流体布局 - 无论是左侧还是右侧 - 我很高兴使用第一个和最后一个关键字.谁能给我任何关于如何在 Susy 2 中执行此操作的指示?

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?

谢谢！

推荐答案

有几种方法可以混合固定/流体布局，具体取决于您自己的具体情况.

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

  1. 隔离侧边栏.

  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) 将跨越 3 列，使用您的 column-width 设置/单位.添加 isolate 将设置负右边距，以防止占用水平空间.添加 wide 将在该宽度中包含一个额外的装订线.你也可以使用像 200px 这样的任意宽度.这取决于你.

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.

从流程中完全移除侧边栏.

Remove the sidebar from the flow entirely.

如果从流程中删除侧边栏是安全的，有时最简单的方法是绝对定位它，并为主要内容添加相等的填充.使用 Susy 2，可能看起来像这样:

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

  • 使用布局上下文技巧.

  • Use a layout-context hack.

    还有一些方法可以创建一个新的布局上下文来填充浮动后的剩余空间.其中最简单的是 overflow: hidden;

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

    • 相关文章