Html 使div始终与另一个div相邻

我有三个div。其中一个充当其他两个的包装器。 让我们叫他们第一和第二组。Div1具有固定的宽度。包装的宽度是可变的，但决不能小于div1的宽度

现在，如何使div2始终具有宽度（包装的宽度-div1的宽度）

以下是我得到的：

.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
}

.div1 {
  width: 200px;
  height: 200px; /*Fixed*/
  border: 2px solid #FF0000;
  display: inline-block;
}

.div2 {
  position: absolute;
  width: 100%; /*Should be   width of wrapper - width of div1*/
  height: 200px;
  border: 2px solid #00FF00;
  display: inline-block;
}

---

如果我没有弄错你的问题，你可以使用纯css方法

.wrapper {
  width: 420px; /*Variable but not less then width of div1*/
  height: 500px;
  border: 2px solid #0000FF;
  box-sizing: border-box;
}

.div1 {
  width: 200px;
  height: 200px; /*Fixed*/
  border: 2px solid #FF0000;
  float: left;
  box-sizing: border-box;
}

.div2 {
  width: 100%; /*Should be   width of wrapper - width of div1*/
  height: 200px;
  border: 2px solid #00FF00;
  box-sizing: border-box;
}

---

如果我没有弄错您的问题，您可以使用纯css方法

.wrapper {
  width: 420px; /*Variable but not less then width of div1*/
  height: 500px;
  border: 2px solid #0000FF;
  box-sizing: border-box;
}

.div1 {
  width: 200px;
  height: 200px; /*Fixed*/
  border: 2px solid #FF0000;
  float: left;
  box-sizing: border-box;
}

.div2 {
  width: 100%; /*Should be   width of wrapper - width of div1*/
  height: 200px;
  border: 2px solid #00FF00;
  box-sizing: border-box;
}

---

你在寻找两件事：

• 要设置

  float:left

  on

  .div2

• CSS函数，可以处理减法运算。具体来说，您要查找的是

  宽度：calc（100%-（200px+（2px*2）+（2px*2））

  ，它是

  .wrapper

  的

  100%

  ，减去

  .div1

  的

  宽度，以及两个元素的
  边框的两侧

这可以从以下几点看出：

.wrapper{
宽度：420px；/*变量，但不小于div1的宽度*/
高度：500px；
边框：2px实心#0000FF；
}
.1分部{
宽度：200px；
高度：200px；/*固定*/
边框：2倍实心#FF0000；
显示：内联块；
}
.第2分部{
浮动：左；
宽度：计算（100%-（200px+（2px*2）+（2px*2））；/*应该是包装的宽度-div1的宽度*/
高度：200px；
边框：2px实心#00FF00；
显示：内联块；
}

---

您正在寻找两件事：

• 要设置

  float:left

  on

  .div2

• CSS函数，可以处理减法运算。具体来说，您要查找的是

  宽度：calc（100%-（200px+（2px*2）+（2px*2））

  ，它是

  .wrapper

  的

  100%

  ，减去

  .div1

  的

  宽度，以及两个元素的
  边框的两侧

这可以从以下几点看出：

.wrapper{
宽度：420px；/*变量，但不小于div1的宽度*/
高度：500px；
边框：2px实心#0000FF；
}
.1分部{
宽度：200px；
高度：200px；/*固定*/
边框：2倍实心#FF0000；
显示：内联块；
}
.第2分部{
浮动：左；
宽度：计算（100%-（200px+（2px*2）+（2px*2））；/*应该是包装的宽度-div1的宽度*/
高度：200px；
边框：2px实心#00FF00；
显示：内联块；
}

您看过flexbox css吗？你看过flexbox css吗？