这是 jsfiddle:http://jsfiddle.net/dazakip/u7d59901/
.nav {
float: left;
width: calc(100% - 75px);
height: 10px;
padding-left: 5px;
padding-bottom: 10px;
background-color: green;
}
.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}
特别是这段代码。希望两个 div 并排放置，并且无论大小如何调整都保持不变。预览将显示我的意思。
谢谢!
最佳答案
您有 5px 的 padding-left，计算时会考虑到这一点。如果您删除或计算 5px 应该没问题!
.nav {
float: left;
width: calc(100% - 80px); /* add 5px */
height: 10px;
padding-left: 5px; /* or remove padding */
padding-bottom: 10px;
background-color: green;
}
.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}
.lol {
height:111110px;
background-color:grey;
}<body>
<div class="nav">HOME | MENS | WOMENS</div>
<div class="checkout">Checkout</div>
<div class="lol"></div>
</body>关于html - 为什么这两个 div 宽度不等于 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34032705/