Question

这里是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彼此相邻，并且无论调整大小，都要保持不变。预览将显示我的意思。

谢谢！

Answer 1

你有一个5px的填充左边，这是在计算时考虑的。如果你删除或计算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>

为什么这两个div宽度不等于100％？

1 个答案: