我正在开发一个应用程序并尝试设计用户界面。事情进展有问题。我的主视图中包含的 div 超出了它们的容器。
这是大部分代码:http://jsfiddle.net/9t3sn/
<div id="mainView">
<div id="top">
<div><label>Entity <select id="entityDropDown" ></select></label></div>
<div id="removeEntity" class=""><a onclick="">✖</a></div>
<div><label>Entity Available <select id="entityAvailable" multiple></select></label></div>
<div><label>Entity Assigned <select id="entityAssigned" multiple></select></label></div>
</div>
<div id="middle">
<div id="entityInfo">
<label>placeholder: <input type="text" id="domainID" disabled="true"/></label></br>
<label>placeholder: <input type="text" id="entityName" /></label></br>
<label>placeholder: <input type="text" id="userEmail" /></label></br>
<label>Description: <textarea id="groupDesc" rows='3' cols="25"></textarea></label></br>
<label>Group Templates: <select id="groupTemplates"></label></select></br>
</div>
</div>
<div id="bottom">
<div id="updateEntity" class=""><a>Update Entity Info</a></div>
</div>
</div>
CSS:
#mdContainer{
position: relative;
border: 2px solid red;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0px;
margin: 0;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
#mainView{
position: relative;
top: 0;
bottom: 0;
background: green;
color: black;
left: 140px;
right: 0;
padding-left: 0px;
}
#mdContainer #top,#mdContainer #middle,#mdContainer #bottom{
height: auto;
width: 100%;
padding: 5px;
}
最佳答案
从 #mdContainer #top, #mdContainer #middle, #mdContainer #bottom
类中移除宽度。并将 margin-left 而不是 left 设置为 #mainView
。
#mainView {
position: relative;
top: 0;
bottom: 0;
background: green;
color: black;
margin-left: 140px;
right: 0;
padding-left: 0px;
}
#mdContainer #top, #mdContainer #middle, #mdContainer #bottom {
height: auto;
padding: 5px;
}
原因是,在您定位之前,div 默认为 100% 宽度,如果您添加宽度和填充,它将计算为容器的 100% + 10px 宽度
关于html - Div 从容器中溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20943386/