背景: レスポンシブな再設計に取り組んでいます。リセットに使用される normalize.css。この手法を使用して DFP 広告を div に挿入します。広告コンテナ div はウィンドウ サイズに応じて非表示になり、広告 iframe は非表示でない div に 1 回だけ挿入されます。幅に応じて非表示または非表示のサイト ロゴ div、.brand もあります。広告 div コンテナー .ta とロゴ コンテナー .brand の両方が、.secondnav という div 内に含まれています。3 つの div はすべて 90 ピクセルの高さです。.brand、#ldr、.ta はすべて display:inline-block です。
.brand が display:none の場合、.ta に含まれる #ldr div の iframe 広告は高さ 90 ピクセル以内に完全に収まります。
ウィンドウが少し大きくなり、.brand が display:inline-block になると、.ta が突然約 4 ～ 5 ピクセル押し下げられます。それらはまだ並んでいますが、突然、広告が数ピクセル低くなります。
何がそれを押し下げているのかわかりません。div が広告の iframe とどのように相互作用しているのかと思いましたが、別のインライン ブロック div の隣にある場合にのみ発生するのはなぜですか?
CSSは次のとおりです。
.brand {
width:200px;height:90px;
background:#660000 url('/dh5.svg') no-repeat left top;
display:inline-block
}
.multiplebgs .brand {
width:200px;height:90px;
background-color:#fff;
background-image:url(/dh5.svg),url(/dhw.svg);
background-position:0 0,30px 0;
background-size:30px,170px;
background-repeat:repeat-y,repeat-y;
display:inline-block
}
.ta {
height:90px;
display:inline-block
}
.secondnav {
height:90px;
background:url('/fs.jpg') 0 0 repeat
}
#ldr {
background:blue;
width:728px;height:90px;
display:inline-block
}
#mldr {
background:yellow;
width:320px;height:50px;
display:inline-block
}
#smallban {
background:green;
width:468px;height:60px;
display:inline-block
}
html は次のとおりです。
<div class="secondnav">
<div class="brand"></div>
<div class="ta">
<div id="ldr" class=
"adslot hidden-phone hidden-tablet visible-desktop" data-dfp=
"728x90"></div>
<div id="mldr" class=
"adslot hidden-desktop hidden-tablet visible-phone" data-dfp=
"320x50"></div>
<div id="smallban" class=
"adslot visible-tablet hidden-phone hidden-desktop" data-dfp=
"Smallbanner"></div>
</div>
</div>
実際の動作を確認できるように、テスト ページへの URL を含めることができるかどうかわかりませんでした。それを編集して、コーシャの場合は 1 つ含めます。Google は iframe の位置合わせについて詳しく説明しますが、ここで質問したいと思います。ありがとう。
私のテストはこちら: http://www.digitalhit.com/bptest/index.shtml問題は、.brand の横に広告がある任意のサイズで表示されます。例: 480px、600px、1024px 以上。派手な色は無視してください。デザインをテストするときに div がはっきりと見えるようにするためです。