html - float :left with % height

Question

我目前正在尝试这样做。

这是我目前得到的代码，

HTML

<a class="home" href="home.php">
    <i id="icon" class="fa fa-home"></i>
    <p id="tag">Home</p>
</a>

.home 的 Css

width: 25%;
height: 25%;
overflow: hidden;
float: left;
background: #ea7b7b;
color: #fff;    
text-decoration: none;

还有高度:25%；不起作用。我发现了一些修复，比如添加 position:absolute;但这会在调整大小时弄乱一切。我正试图找到解决此问题的方法，我们将不胜感激!

Answer 1

尝试将元素放在具有明确高度的容器 div 中。

<div class="header"></div>
<div class="container">
        <a class="home" href="home.php">
            <i id="icon" class="fa fa-home"></i>
            <p id="tag">Home</p>
        </a>
        <a class="contact" href="contact.php">
            <i id="icon" class="fa fa-home"></i>
            <p id="tag">Contact</p>
        </a>
</div>
<div class="footer"></div>

CSS

.header, .footer
{
    height: 50px;
    background: black;
}

.home 
{    
    background: #ea7b7b;    
}

.container > a 
{
    width: 25%;
    height: 50%;
    overflow: hidden;
    float: left;
    color: #fff;
    text-decoration: none;        
}

.container 
{
     height: 600px;
     width: 100%;
}