HTML/CSS-如何根据div的内容来调整div的大小？

我有两个并列的div

在第一个div中，我有两个并排的标签，下面有一个输入文本。其中一个标签是错误信息。有时会显示，有时不会。当它不显示时，我希望div的大小变小，这样第二个div就可以更接近它

第二件事是相同的，只是它有一个标签div，因此不需要调整大小

有没有办法实现我想要的？下面有一个我想要实现的令人惊叹的例子：

这是代码

<div id="main-div">
<div id="address-number-div">
    <label>Number</label>
    <label class="error" id="number-error">Empty Field</label>
    <input id="number-input" onfocus="onfocus('number-error')"/>
</div> 

<div id="address-complement-div">
    <label>Complement</label>
    <input id="complement-input" />
</div>

---

将它们设置为

display:inline块

使其收缩以适应内容。

将其设置为

显示：内联块使其收缩以适应内容。
看看这个

向左浮动div可以解决这个问题。
看看这个

向左浮动div可以解决这个问题。
不要给出
width
类型值，请给出：

打开代码查看。不要给出宽度，请给出：

打开代码查看。
请注意，在块元素上设置“display:inline block；”在IE7上不起作用-当然，我添加了
*display:inline*缩放：1
在IE7中有一个内联块元素。当然，如果他们决定使用这种方法，只想向OP指出它。干杯我已经在使用
display:inline块
将它们并排设置，但它们不会调整大小。我使用javascript隐藏错误标签，使用
style.display=“none”
和
style.visibility=“hidden”
。要显示它回来，我使用
style.display=“inline”
和
style.visibility=“visible”
我不想麻烦可见性属性，display:none应该很好。请注意，在块元素上设置“display:inline block；”在IE7上是不起作用的-当然，我添加了
*display:inline*缩放：1
在IE7中有一个内联块元素。当然，如果他们决定使用这种方法，只想向OP指出它。干杯我已经在使用
display:inline块
将它们并排设置，但它们不会调整大小。我使用javascript隐藏错误标签，使用
style.display=“none”
和
style.visibility=“hidden”
。要将其显示回来，我使用
style.display=“inline”
和
style.visibility=“visible”
我不需要考虑可见性属性，display:none应该很好。这里有什么问题？你试过什么吗？@PavloMykhalov是的，请看我的密码。在JSFIDLE中尝试一下，它显示的与图像相同。这里有什么问题？你试过什么吗？@PavloMykhalov是的，请看我的密码。在JSFIDLE中尝试一下，它显示的与图像相同。这不能用内联块实现吗？因为我在这些组件下面还有其他组件，如果我使用float，它们就会失去位置。你可以添加一个包装div。下面是如何操作的更新。谢谢，我实际上使用的是包装器，我认为问题可能出在其他html元素上。使用内联块无法实现这一点？因为我在这些组件下面还有其他组件，如果我使用float，它们就会偏离位置。你可以添加一个包装div。下面是如何操作的更新。谢谢，我实际上使用的是包装器，我认为这个问题可能与其他html元素有关。我不知道为什么，但在我的代码中，即使它将显示显示显示为无，可见性显示为隐藏，它仍然会占用空间。您是否已将
宽度更改为
px
？是的，我已更改。当我在Chrome和Firefox中看到html输出时，标签仍然占据着空间，并且呈现的标签具有
style=“display:none；visibility:hidden”原来是我用的！css中的重要标记。已经移除，现在它可以工作了。这很好。现在你可以接受答案了，你会找到最好的答案。我不知道为什么，但在我的代码中，即使显示为无，可见性为隐藏，它仍然会占用空间。你是否已将
宽度更改为
px
？是的，我已更改。当我在Chrome和Firefox中看到html输出时，标签仍然占据着空间，并且呈现的标签具有
style=“display:none；visibility:hidden”原来是我用的！css中的重要标记。已经移除，现在它可以工作了。这很好。现在你可以接受答案了，你会找到最好的答案。
div {border: 1px solid #000000; padding: 5px;}

.error{color:#FF0000; margin-left:5px;}

#main-div div {display:inline-block;}

#main-div input {display:block;}

#number-input {
    width: 16%;
}​

#number-input { width: 24px; }​