Question

我的图像无法正确显示在其他图标后面。我将两个单独的图像应用于环绕图标。第一个显示正常，但第二个在底部剪辑。

在网站上，可以在页脚中看到错误：http://everythingdisc.hubs.vidyard.com/

<div class="inner">
    <div class="icons">
        <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">&nbsp;</a>
         <a href="https://twitter.com/everything_disc " id="twitter">&nbsp;</a>
         <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">&nbsp;</a>
    <div class="clear-left">&nbsp;</div>
    </div>
</div>

这是我使用的CSS：

#social-media .inner {
  display: inline-block;
  height: 74px;
  padding: 0 0 0 30px;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
  display: inline-block;
  width: auto;
  height: 59px;
  padding: 15px 20px 0 0;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

任何人都知道为什么图片不显示属性？

Answer 1

你需要给两个div赋予相同的高度。

#social-media .inner {
display: inline-block;
height: 74px;
padding: 0 0 0 30px;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
display: inline-block;
width: auto;
height: 74px;
padding: 15px 20px 0 0;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

Answer 2

从我可以看到显示图像左侧的div为74px高，但显示右半部分的div仅为59px高。另外左侧div包含右侧div并且底部填充为30px，这可能会弄乱右侧的显示。尝试这样的事情...我没有你的图标，所以定位可能会关闭，但你的图像现在正确显示

.inner {
  display: inline-block;
  height: 74px;
  padding: 0 0 0 30px;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

.inner .icons {
  display: inline-block;
  width: auto;
  height: 74px;
  padding: 15px 20px 0 0;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

    <div class="inner">
        <div class="icons">
            <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">icon1</a>
            <a href="https://twitter.com/everything_disc " id="twitter">icon2</a>
            <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">icon3</a>
            <div class="clear-left">&nbsp;</div>
        </div>
    </div>

背景图像无法正确显示css

2 个答案: