3

列の 1 つに広告が表示されるレイアウトがあります。画像 1 を参照してください。

画像1

広告画像は 4 列の div にあります。広告は幅 300px の MREC です。ただし、iPad では、列が減少するため、広告は 236 ピクセルになり、これはノーノーです。下の画像 2 を参照してください。もちろん、ここでも同じように見えますが、小さくなっています。

画像2

300pxのままにする必要があります。また、広告サーバーが iframe ベースの広告 (これも 300px) を配信する場合があります。

そのため、div の幅を縮小する必要はありません。

そのクラスにクラスを追加し、css を min-width:300px に設定しようとしましたが、iPad では右端からはみ出します。他の div はそれに応じて十分に縮小しません。画像 3 を参照してください。

画像3

では、広告の div が iPad でサイズ変更されないようにするにはどうすればよいですか?

編集:また、プッシュプルで列の順序を逆にすると、問題が悪化するようです。電話では最初に、他のプラットフォームでは 2 番目に広告を表示する必要があるため、これを行っています。

<div class="row">
<div class="four columns ad push-eight">
    <img src="http://placehold.it/300x300">
</div>
<div class="eight columns pull-four">
  <h1>Bacon ipsum dolor sit amet tri-tip shankle chicken leberkas beef pork</h1>
</div>

4

2 に答える 2

8

これを機能させるには、Foundation から少し離れなければなりませんでした。必要なものは次のとおりです。

例: http://cdpn.io/Kypen

説明: 広告ラッパー.adと.container要素を作成しました。

は.ad幅 300 ピクセルで、右にフロートされています。要素に.containerは 320px 幅の余白が与えられます。Foundation はボーダーボックスのサイジングを使用しているため、余白は.container要素全体の幅に考慮されます。その結果、.ad「偽マージン」内に収まります (余分な 20 ピクセルは空白用です)。これは古いトリックであり、Foundation の .row & .column 要素内で問題なく機能します。さらに、ネストされた行の作成にも影響しません。

メディア クエリも追加しました。これを使用して、低解像度での動作を変更できます。

.ad
{
  float:right;
  width:300px;
}
.container
{
  position:relative;
  margin-right:320px;
}
@media only screen and (max-width: 767px)
  {
  .ad
  {float:none;}
  .container
  {margin:0;}
}
于 2013-01-29T17:46:54.923 に答える