HTML / CSS - 如何根据内容使div变大？

Question

我有两个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>

和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

看看这个DEMO。

浮动你的div应该可以解决这个问题。

Answer 3

不要提供width <persentage>类型值，请<length>：

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

使用my fiddle上的代码查看。