Question

我有一个简单的页面，左边是内容，右边是<input name="depositAmt" value="form.depositAmt"/> <actionstate expression="form.getDepositAmt()> <transition on="" to="payment"> <transition on-exception="" to="summary"> </actionstate>。我希望左边的aside是容器宽度的70％，然后div占据剩下的空间，但我无法弄清楚如何给它一个可变宽度。

我已经尝试将aside的宽度设置为30％，但这并没有为aside和{{div之间的24px空间留出任何空间。 1}}。我也尝试将旁边的宽度设置为28％并且接近它，但我认为有更精确的方法。

这是一个简单的例子：

aside

.container {
  width: 80%;
  margin: auto;
  background-color: #ccc;
  height: 500px;
  padding: 24px;
}
.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
}
.right {
  background-color: white;
  width: 28%;
  height: 100%;
  float: right;
}

Answer 1

无需进入Sass，您可以使用CSS calc();功能。

请注意，在下面的CSS中，我保留了28％的价值，以便在不支持calc() 的旧浏览器（旧版Android浏览器，Opera Mini和IE8 - ）上优雅降级<\ n / em>的

直播示例here。

.container { width: 80%; margin: auto; background-color: #ccc; height: 500px; padding: 24px; } .left { background-color: white; width: 70%; height: 100%; float: left; } .right { background-color: white; width: 28%; width: calc(30% - 24px); height: 100%; float: right; }

Answer 2

好的，这个怎么样：

http://jsfiddle.net/9fy6txpa/

.left {
  background-color: white;
  width: 70%;
  height: 100%;
  float: left;
  border-right:24px solid #ccc;
  box-sizing:border-box;
}

根据需要将宽度设置为70％和30％。不要在div和旁边之间使用边距/填充，而是给div一个24px宽的右边框，然后将它的box-sizing属性更改为border-box。这样，它的宽度将是70％包括添加的边框（总宽度为70％，而不是默认框模型的70％加上边框）。

如何将剩余区域的宽度放在一边？

2 个答案: