0

レイアウトにMREC広告を収容する必要があります。広告の幅は300ピクセルで、流体グリッドが収縮するため、サイズを変更することはできません。

さらに、広告は見出しブロックの前にスマートフォンの最初のアイテムである必要があります。したがって、ブレークポイントでは、このスクリーンショットのように、見出しの「後ろ」にプッシュするようにオメガに設定しています（見やすくするために灰色のルール）。

ここに画像の説明を入力してください

見出しは8列、広告は4列です。iPadの広告列と広告が300ピクセル未満に縮小されることを除いて、すべて問題ありません。これは許可されていません。では、広告コンテナ以外のすべてを流動的に保つにはどうすればよいでしょうか。

4

2 に答える 2

2

コンテナの最大/最小幅を設定しますか？

于 2013-01-28T19:36:10.807 に答える
1

これを行うのは難しいことではありませんが、上のグリッドが下の柔軟なグリッドと正確に一致しないことを意味します。それは問題ではないと思います。これらの2つの要素をレイアウトするには、いくつかの関数を使用する必要がありますが、それ以外はすべて以前とまったく同じように実行できます。

広告を最小幅まで柔軟に保つことができます。

.ad {
  @include span-columns(4 omega);
  min-width: 300px; // you can use any width you want.
}

または、広告を完全に静的にすることができます。

.ad {
  float: right;
  width: columns-width(4); // you can use any width you want.
}

重要なのは、見出しに列幅を設定してはならないということです。

他にもいくつかのオプションがあります。最も簡単なのは、右マージンとパディングを静的な広告サイズ（およびガター）に等しく設定することです。

.headline {
  margin-right: columns-width(4) + $gutter-width;
}

または、その側溝を曲げたい場合は、次のことを試してください。

.headline {
  margin-right: columns-width(4);
  padding-right: gutter();
}

clear: both;メインコンテンツに追加して、見出しと広告を確実にクリアすることができます。

このアプローチがうまくいかない場合は、見出しの新しい「フォーマットコンテキスト」を作成してみてください。古典的な手法の1つは単純overflow: hidden;です。ニコール・サリバンは、彼らがoocssに対してそれをどのように行うかについての良いブログ投稿を持っていますが、それはもう少し複雑になり、あなたはそれをすべて必要としないかもしれません。

アップデート：

これらのソリューションはすべて、マークアップの最初に広告が表示される必要があります。それを回避する唯一の方法は、広告の高さを知っている場合です。その場合、広告をフローティングにするのではなく絶対に配置し、同じ方法で広告用のスペースを作成し、見出し（または行コンテナがある場合は行コンテナ）に最小の高さを設定できます。

于 2013-01-28T23:43:17.747 に答える