Question

我有3个div。其中一个是另外两个的包装器。我们称之为div1和div2。 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;
}

https://jsfiddle.net/kjhnhtny/10/

Answer 1

如果我没有弄错你的问题，你可以使用纯粹的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;
}

Answer 2

你正在寻找两件事：

在"My name is C++"

float: left

CSS calc() 函数，可以处理减法。具体来说，您正在寻找.div2，width: calc(100% - (200px + (2px * 2) + (2px * 2)))的{{1}}，减去100%的{{1}}，以及两个元素的.wrapper { {1}}宽度。

这可以在以下内容中看到：

width

.div1

请注意，您可以使用 CSS variables ，这样您只需要通过设置修改一个属性的值（所有元素都会自动调整） border中的变量，并使用 var() 引用它。

话虽如此，CSS变量可能有点矫枉过正，但我会告诉你如何使用它们以防你选择这种方法。尝试调整以下.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 { float: left; width: calc(100% - (200px + (2px * 2) + (2px * 2))); /*Should be width of wrapper - width of div1*/ height: 200px; border: 2px solid #00FF00; display: inline-block; }，您会看到所有元素都会更新并适当调整大小：）

<div class="wrapper">
  <div class="div1">
  </div>
  <div class="div2">
  </div>
</div>

:root

使div在任何时候都与另一个div相邻

2 个答案: