1

我正在使用我相当陌生的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）包裹它的高度？

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

提前致谢！

4

2 回答 2

3

不要跨越容器。

您遇到的问题是因为Singularity 列已被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!
  }
}

这种技术被称为“ clearfix ”。

这可以通过Singularity 的作者 Team Sass的多功能工具包扩展来更简单地完成：

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

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

于 2013-10-10T17:29:47.123 回答
0

我修好了它。忘记添加 @include grid-span(12, 1); 对于我的 .about

于 2013-10-10T10:04:01.787 回答