好的,我正在设置一个迷你页面,我希望它是 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>
最佳答案
像这样尝试: Demo
.content{
position: relative;
}
.bottom{
width:100%;
}
.item{
box-sizing:border-box;
}
关于html - 简单的水平等分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29010779/