html - div高度自动增加

Question

我创建了一个 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 'a' 的高度会自动增加 3。

如果我删除该标签，它就会正常运行。尝试了最小高度选项，但对我不起作用。

我应该怎么做才能使包装器 div 'a' 不改变其高度？

Answer 1

试试这个

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

如果需要任何更改，请告诉我