0

HTML5 で次のように定義された記事がたくさんあります。

    <section class="applications">
        <article>
            <a href="..."><img ... /></a>
            <h2>...</h2>
            <p>...</p>
            <a ... class="appstore">...</a>
        </article>

各記事には、まったく同じ要素があります。Susy 2.xを使用して、画像が左上にあり、その下に空のスペース（つまり、列1）があり、次に右にあるように配置する方法を理解しようとしています。ページ、私は <h2> が <p> の上にあり、<a class="appstore"> の上にある垂直レイアウトを持っています。

この図で、私が探している目的の形式を確認できます。

ご希望のフォーマット

スタイリングは思い通りに機能していますが、レイアウトに関しては...「@include span」を使用する必要があると確信していますが、1時間プレイした後、正しく取得できません. ありがとう！

4

1 に答える 1

0

Susyを使用する必要はまったくありませんが、もちろん使用できます。:)

これはかなり一般的な CSS の問題です。なぜなら、レイアウトにフロートを使用することがよくあるからです。Susy は実際には、レイアウト計算を管理するためのショートカットのセットにすぎませんが、CSS を修正することはできません。最初に CSS のレイアウトの問題を解決してから、Susy がコードの明確化と単純化に役立つ場所を判断してください。

たとえば、フロートのみを使用した CSS でのいくつかの解決策を次に示します。

// Option A
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  float: right;
  width: 75%;
}

// Option B
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  margin-left: 25%;
}

// Option C
// --------

article {
  padding-left: 25%;
}

.image-link {
  float: left;
  width: 24%;
  margin-left: -25%;
}

絶対配置、追加のマークアップ、または他の多くのアプローチを使用するソリューションは他にもたくさんあります。どちらを好むかは、正確にどのように機能させたいか、マークアップをどの程度制御できるかなどによって異なります。

Susy のspan()mixin は、float 方向 (デフォルトでは左ですが、lastキーワードを使用すると右)、幅、およびオプションである種のガターを出力します。pre()/push()/pull()およびmixinはprefix()、それぞれマージンまたはパディングを設定します。または、ミックスインを完全にスキップして、span()関数を使用して、必要な場所でグリッド計算を取得することもできます。

// Option A
// --------

.image-link {
  @include span(1 of 4);
}

.title, .description, .purchase {
  @include span(last 3 of 4);
}

// Option B
// --------

.image-link {
  float: left;
  width: span(1 of 4);
}

.title, .description, .purchase {
  @include pre(1 of 4);
}

// Option C
// --------

article {
  @include prefix(1 of 4);
}

.image-link {
  @include span(1 of 4);
  @include pull(1 of 4);
}

また、Susy のisolation機能やその他の多くのアプローチを使用することもできます。それらはすべて、数学と CSS の単純なラッパーです。Susy の抽象化によって、CSS で作業しているという事実が隠されないようにしてください。float は単なる float です。

于 2014-07-19T21:27:08.297 に答える