1

私はかなり新しいsingularity.gsを使用してWebサイトを構築しています。div に背景色を指定するのに問題があります。これは私の html 構造です:

http://oi44.tinypic.com/205xt1i.jpg、「緑」の部分は私のabout 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の多目的Toolkit拡張機能を使用すると、さらに簡単に行うことができます。

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

%toolkit-micro拡張可能なものには、古いブラウザーで clearfix トリックを機能させるための追加のルールがいくつかあります%clearfix-legacy古いブラウザーでも機能する拡張機能もあります。

于 2013-10-10T17:29:47.123 に答える