html - 简单的水平等分

Question

好的，我正在设置一个迷你页面，我希望它是 100% 可扩展的，所以我尝试只使用 %。

但我没有让“元素”占据 33% 的宽度，并且分布超过了“内容”的 80%。

我做错了什么？

body, html{
    width: 100%;
    height: 100%;
}

.menu{
    width: 20%;
    height: 100%;
    background: #fff;
    float: left;
}

.content{
    width: 80%;
    height: 100%;
    background: #eee;
    float: left;
}

.bottom{
    position: absolute;
    bottom: 0;
}

.item{
    width: 33%;
    float: left;
}

.red{background: red;}
.blue{background: blue;}
.green{background: green;}

<div class="menu">menu</div>
<div class="content">content
    <div class="bottom">
        <div class="item red">left</div>
        <div class="item blue">mid</div>
        <div class="item green">right</div>
    </div>
</div>

Answer 1

像这样尝试: Demo

.content{       
    position: relative; 
}

.bottom{       
    width:100%;
}

.item{       
    box-sizing:border-box;
}