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高度自动增加

回答

相关问题