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

Question

我有2个div并排。

在第一个div中，我并排有2个标签，并且在它们下方有一个输入文本。 标签之一是错误信息。 有时会显示，有时则不会。 当它不显示时，我希望将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>

和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%;
}​

Answer 1

将它们设置为display: inline-block; 让它们缩小以适合内容。

Answer 2

看看这个演示 。

向左浮动div应该可以解决此问题。

Answer 3

不要给出width <persentage>类型的值，而给出<length> ：

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

在我的小提琴上看到您的代码。