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。

如果我删除那些标签，它表现正常。尝试了min-height选项，但对我没用。

我应该怎么做才能让包装div“a”不改变它的高度？

Answer 1

尝试从height: 50px;课程中删除.textbox可能会解决您的问题。

Answer 2

试试这个

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

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

div高度自动增加

2 个答案: