1

この下の影を上の影のように並べようとしていますが、ぼんやりしているようには見えません。折りたたまれるのは、開発者ツールバーを使用してcssファイルの行の高さまたはフォントサイズをはるかに下に削除したときだけですが、もちろんこれは他のすべてにも影響します。これが私の基本的なhtml構造です：

<div class="banner-image">
  <div class="banner-image-wrapper">
    <div class="shadow-top"></div>
      <a class="header-image">
        <img />
      </a>
    <div class="shadow-bottom"></div>
  </div>
</div>

タグで、フォントサイズと行の高さを削除すると、すべてがうまく折りたたまれますが、タグだけでこれを強制することはできません。

それが解決されれば、これはばかげた問題になるだろうと私は知っています。

ありがとう！

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

4

2 に答える 2

1

答えは実際には非常に単純です。巧妙な配置を使用し、親のボックスモデルを利用する必要があります。

.banner-image{
    position:relative;
}

.shadow-bottom{
    position:absolute;
    height: x;
    bottom: -x;
}

必要な式は次のとおりです。

  • 下の影の高さを取ります（ある値x）
  • 次に、その要素の親が「相対」の位置にあることを確認します（〜important〜）
  • 下の影の位置を「絶対」にする
  • 下部から高さの値（-x）を引いた位置に配置します

効果を示すjsFiddleは次のとおりです。http：//jsfiddle.net/k7CmJ/

于 2012-09-24T09:05:49.713 に答える
1

これは古いことは知っていますが、絶対的なポジショニングが機能しない、これに対する答えを探している他の人にとっては、imgタグにdisplay：blockを設定すると、そのスペースが削除されます。

.header-image > img {
    display:block;
}

通常、画像はインラインブロックであり、インラインであるため、画像の周囲の空白は保持されます。

ここに問題があります：http：//jsfiddle.net/3Kd3f/

そして、これはまったく同じコードですが、imgタグにdisplay：blockが追加されています：http：//jsfiddle.net/3Kd3f/1/

于 2012-10-25T14:02:33.243 に答える