Singularity.gs div 背景未显示

Question

我正在使用我相当陌生的 singularity.gs 建立一个网站。我在给div 一个背景色时遇到问题，这是我的 html 结构：

http://oi44.tinypic.com/205xt1i.jpg，"绿色"部分是我的关于div。

<div class="about">
    <div class="photo">
        <img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
    </div>
    <div class="text">
        <h1>Hello I'm Jeroen Druw&eacute</h1>
        <p>...</p>
    </div>
</div>

要实现这种影响，必须为div 设置一个高度：

@include breakpoint(70em) { 
 .about {
   height: 340px; //This property will set the height of the div
 }
.about .photo {
   padding: 1em;
   @include grid-span(2, 4);
 }
.about .text {
   padding-top: 7em;
   padding-left: 1em;
   display: inline;
   @include grid-span(4, 6);
}}

如果我删除"高度：340px"，则不会绘制任何背景：

http://oi39.tinypic.com/2s16ezl.jpg(只有我细细的边界线(

有没有办法让div 围绕其内容(.photo，.text(包裹其高度？

注意：如果我删除 .photo 和 .text @include网格跨度，背景会显示，但我不想失去奇点功能

提前感谢！

Answer 1

不要跨越容器。

发生此问题的原因是float编辑了奇点列，并且浮点元素已从流中删除。这意味着容器不再"知道"您的列，因此它的行为类似于空元素。

有一个名为 clear 的属性，它将元素放置在任何附近的浮动元素下方。如果在所有列之后在容器内创建一个额外的元素，则应用于该元素的clear: both;规则会将其推到浮点列下方，从而有效地将容器拉伸到与列一样高：

<div class="about">
    <div class="photo">
        <img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
    </div>
    <div class="text">
        <h1>Hello I'm Jeroen Druw&eacute</h1>
        <p>...</p>
    </div>
    <div class=clear></div>
</div>

.clear { clear: both; }

但是不要添加额外的元素，这不是语义。请改用出现在元素内容末尾的:after伪元素。使用 :after 就像在元素内容的末尾创建一个空白元素一样。

.about {
  &:after {
    content: ''; // This is required for the pseudo-element to exist
    display: block; // Default display is inline, have to change that for `clear` to work.
    clear: both; // Yay, magic!
  }
}

这种技术称为"清除修复"。

这可以通过Singularity的作者Team Sass的多用途工具包扩展更简单：

@import 'toolkit';
.about { @extend %toolkit-micro; }

可扩展%toolkit-micro有一些额外的规则，使clearfix技巧在较旧的浏览器中起作用。还有%clearfix-legacy可扩展的，即使在古老的浏览器中也能工作。

Answer 2

我修复了它。忘记添加@include网格跨度(12， 1(;对于我的 .about