Question

我有3 a与width:100%。我不想设置一个高度，以便图像保持它们的比例。由于某些未知原因，如果未指定高度或设置为auto，则a元素会消失。知道为什么会这样吗？

HTML：

<div class="cuerpo">
    <div class="articulosysidebar">
    <!--articulos-->
    <div class="articulos"></div>
  <!--sidebar-->
    <div class="sidebar"></div>
  </div>
<!--botones redes sociales-->
<div class="social">
    <a class="twitter" href="https://twitter.com/franlegon"></a>
    <a class="facebook" href="https://www.facebook.com/franlegon"></a>
    <a class="pinterest" href="http://www.pinterest.com/franlegon/"></a> 
</div>
</div>

CSS：

body{height:2000px}
/**/
.social {
    height:100%;
    width: 4.7%;
}
.social a {
  height: 3vw;            /*HERE I WANT NOTHING*/
  width: 100%;            /*HERE I WANT 100%*/
  float:right;
  display: block;
}

.twitter {background-image: url(http://ow.ly/IPVSe);}
.facebook {background-image: url(http://ow.ly/IPVWg);}
.pinterest {background-image: url(http://ow.ly/IPVGB);}

/**/
.cuerpo {
    width:100%;
    height:100%
}

.articulosysidebar {
    width:91%;
    height:100%;
    background:#DEDEEC;
    margin-right:4%;
    float:right;
}

/**/
.articulos {
    width: 74%;
    height:100%;
    float: left;
}

/**/
.sidebar {
    background: #165eac;
    float:right;
    width: 25%;
    height:100%;

}

也可在此处找到： http://jsfiddle.net/FranLegon/y7so6u10/

Answer 1

由于您的链接标记为空<a></a>，我建议您添加：

<a class="twitter">Twitter</a>

并添加以下代码以隐藏文字：

.twitter {
  text-indent: -9999px;
}

更新了演示http://jsfiddle.net/y7so6u10/5/

Answer 2

那是因为您的a标记为空。如果您希望它与内容一起增长，您需要为其提供一些内容（background不是内容）。您可以使用img标记添加所需的图像。

<a class="twitter"><img src="url(http://ow.ly/IPVSe)" alt="Twitter /></a>

在你的.css文件中：

.social a img {
    width: 100%;
}

当高度相对时，元素消失

2 个答案: