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的大小來製作大小？

回答

相關問題