1

私は最近、私の個人的なウェブサイトで使用するため、および将来のプロジェクトのために使用するために、Bourbon と Neat を調べ始めました。

左から右、右から左のレイアウトを交互に再現しようとしています。これと同様: http://www.plunkettassociates.co.uk/services/

テキストを含む 48% の列があり、その後に画像を含む 48% の列が続きます。このレイアウトは、ページの下で左右に交互になります。重要なことに、DOM 構造は同じです。CSS を使用して、48% の列と余白の配置を操作します。

ニートを使用してこの交互のレイアウトを実現する方法を誰かが説明できますか?

4

1 に答える 1

0

Bourbon/Neat を使用してこのレイアウトをエミュレートする場合。あなたはいくつかのことを知っている必要があります:

  • あなたが共有するURLには、いくつかの行のコンテナがあり、__タグにはこの役割があります。
  • ニートを使用してレスポンシブにテーマを設定できる 2 つの列。この例では、col-1-2クラス タグです。

Neat はその目的のために 2 つの mixin を提供しています。外部コンテナーとスパン列:

たとえば、次のコードでこれをエミュレートできます。

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Neat を使用した Sass コード。ページに 12 列あると仮定します。

.row {
   @include outer-container;
}

.column {
   @include span-columns(6);
}

最後に、画像への影響は簡単で、必要なのは負の値のマージンだけです。例では -80px の margin-top です:

よろしく。

于 2014-09-04T14:47:36.337 に答える