HTML/CSS - 如何根据div的大小来制作大小？

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

第二件事是同样的事情，除了它有一个标签div，因此它不需要调整大小。

有没有办法实现我想要的？还有就是我想要的下方acahieve一个赫然得出例如：

Awesomely Drawn Example Of Autosize Width

这是代码。

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

来源

2012-09-13 Comic Sans MS Lover

这里有什么问题？你甚至尝试过什么？ – Pavlo

@PavloMykhalov是的请看我的代码。在jsfiddle中尝试它，它显示与图像相同。 –

看看这个DEMO。

浮动你的div离开应该解决这个问题。

来源

2012-09-13 13:50:06

这不可能实现使用内联块？因为我在这些下面有其他组件，如果我使用浮动，他们会失去位置。 –

你可以添加一个包装div。这是一个更新的[** DEMO **]（http://jsfiddle.net/zyzkV/33/）。 –

谢谢，我实际上使用包装，我认为这个问题可能与其他html元素。 –

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

来源

2012-09-13 13:40:55 feeela

请注意，设置“display：inline-block;”一个块元素不会在IE7的框中工作 - http://www.brunildo.org/test/InlineBlockLayout.html –

当然，我添加'* display：inline; * zoom：1;'在IE 7中有一个嵌入块元素。 – feeela

当然，如果他们决定使用这种方法，只是想指出OP。干杯! –

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

#number-input { width: 24px; }

与my fiddle代码看到它。

来源

2012-09-13 15:42:28 Pavlo

我不知道为什么，但在我的代码中，尽管它将显示器呈现为无显示状态，但隐藏状态仍然占用空间。 –

你是否将'width'改为'px'？ – Pavlo

是的，我改变了。当我在Chrome和Firefox中看到html输出时，标签仍然占据空间，并且呈现的标签具有'style =“display：none; visibility：hidden”;' –

HTML/CSS - 如何根据div的大小来制作大小？

回答

相关问题