div高度自動增加

我創建了一個div。包含另外三個div的。div高度自動增加

HTML：

<div id="a"> 
    <div id="a1"> 
     <img src="p.png" alt="an image" height="50" width="200"> 
    </div> 
    <div id="a2"> 
     <form method="post"> 
      <input type="text" class="textbox"/> 
     </form> 
    </div> 
    <div id="a3"></div> 
</div>

CSS：

#a 
{ 
height:50px; 
width:100%; 
display: table; 
position: fixed; 
} 

#a1 
{  
width: 200px; 
height: 100%; 
display: table-cell; 
} 
#a2 
{ 
height: 100%;  
background-color: #664499; 
display: table-cell; 
} 
.textbox 
{ 
height: 50px; 
float: left; 
margin: 0px; 
border: 0px none; 
} 
#a3 
{ 
width: 200px; 
height: 100%; 
background-color: #669999; 
display: table-cell; 
}

我的問題是，當我把任何標記成像img或input父DIV '一' 通過增加其高度3自動。

如果我刪除該標籤，它表現正常。嘗試了最小高度選項，但沒有爲我工作。

我應該怎麼做才能讓包裝div'a'不會改變它的高度？

來源

2014-05-09 user3619703

你能提供撥弄例子嗎？ –

對於遲到的回覆抱歉@亞歷山大它是： http://jsfiddle.net/VishalMajlekar/dfz74/ – user3619703

嘗試從.textbox中刪除height: 50px;類可能會解決您的問題。

來源

2014-05-09 09:24:10 Satz

「可能」或「將」？ – brasofilo

它實際上可能... – Satz

thnx fr回覆，但我需要textbox高度50px固定。 – user3619703

試試這個

<div id="Inner_Right_Layout"> 
<table> 
    <tr> 
     <td><div class="usr_img_div"> 
        <img src="~/Images/username.png" /> 
       </div></td> 
     <td><div class="usrnm_txtbx_div"> 
        <input type="text" id="txtUserName" class="textprop" /></td> 
    </tr> 
    <tr> 
     <td><div class="usr_img_div"> 
        <img src="~/Images/password.png" /> 
       </div></td> 
     <td><div class="usrnm_txtbx_div"> 
        <input type="password" id="txtPassword" class="textprop" /></td> 
    </tr> 

     <tr> 
     <td><div class="usr_img_div"> 
        <img src="~/Images/password.png" /> 
       </div></td> 
     <td><div class="usrnm_txtbx_div"> 
        <input type="password" id="txtPassword" class="textprop" /></td> 
    </tr> 
</table>

和CSS這是

#Inner_Right_Layout { 
background-color: #43BDA4; 
height: 100%; 
width: 100%;  
border: 0; 
padding: 0; 
margin: 0; 
} 


#control_main_div { 
height: 50%; 
width: 70%; 
margin-left: 0%; 
margin-top: 0%; 
border:1px solid black; 
} 

.username_div { 
height: 15%; 
width: 100%; 
margin: 0px; 
border:;1px solid blue; 
padding-bottom:5px; 
} 

.usr_img_div { 
height: 10%; 
width: 15%; 
float: left; 
border:;1px solid red; 
} 

.usrnm_txtbx_div { 

width: 80%; 
margin-left: 0%; 
font-family: Ubuntu; 
border:1px solid yellow; 
margin-top:0%; 

} 
.textprop { 
height: 80%; 
width: 90%; 
margin: 0; 
padding: 0; 
border: 0; 
margin-left: 1px; 
font-family: 'Ubuntu'; 
font-size: 16px; 
font-weight: 100; 
}

讓我知道，如果有變化所需

來源

2014-05-09 09:29:22 Manjuboyz

你不應該使用表格佈局 –

但仍然div高度增加一些像素... – user3619703

感謝您的重播@Deja Vu，這個小提琴與div可能會幫助http://jsfiddle.net/Manjuboyz/vJS4m/87/ – Manjuboyz

div高度自動增加

回答

相關問題