Question

我正在开发一个应用程序并尝试设计用户界面。有问题让事情继续下去。在我的主视图中包含的div包含在其容器之外。

<div id="mainView">
    <div id="top">
        <div><label>Entity <select id="entityDropDown" ></select></label></div>
        <div id="removeEntity" class=""><a onclick="">&#10006;</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;

}

Answer 1

从#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宽度

Div从容器中溢出

1 个答案: