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

如果我删除“height：340px”，则不会绘制背景：

http://oi39.tinypic.com/2s16ezl.jpg（只有我薄的边线）

有没有办法让div围绕其内容包装高度（.photo，。text）？

注意：如果我删除.include grid-span for .photo和.text，背景显示但我不想失去奇点功能

提前致谢！

Answer 1

不要跨越容器。

您遇到的问题是因为奇点列是float ed ，而浮动元素是从流 中取出的。这意味着容器不再“知道”您的列，因此它的行为类似于空元素。

有一个名为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!
  }
}

此技术称为“clearfix”。

使用Singularity的作者Sass团队的多用途Toolkit扩展可以做得更简单：

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

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

Answer 2

我修好了。忘了添加一个@include网格跨度（12,1）;对于我的.about

Singularity.gs div背景未显示

2 个答案: