css - 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

看看这个DEMO .

将 div 向左浮动应该可以解决这个问题。