0
因此，我的父DIV包含3個主DIV，每個DIV包含幾個DIVs。我有父母li元素內聯顯示，因爲我希望所有3個嵌套的DIVs沿着父級的寬度並排。我已經成功地將前兩個正確排列。第三個div具有正確的x軸定位，但是在y軸上已經下降並在父div之外，並且我不確定哪裏出錯。我在StackOverflow上嘗試了許多不同的解決方案，但是沒有任何成功。兒童DIV掉於父DIV
我有右邊的div（父母下面的那個）設置爲絕對，就好像它不是那麼它沒有得到正確的x軸，絕對它獲得正確的一半位置。
相關代碼：
.supContainer {
position: absolute;
top: 900px;
left: 38%;
width: 400px;
}
.supContainer ul {
list-style-type: none;
padding-left: 0px;
margin: 0;
}
.supContainer li {
display: inline-block;
white-space: nowrap;
margin-top: 10px;
margin-right: 10px;
}
#supp {
margin-left: 295px;
}
.leftUpper {
width: 233px;
padding-left: 47px;
}
.leftLower {
width: 233px;
padding-bottom: 10px;
}
.supMid {
float: none;
margin-right: 5px;
width: 201px;
padding-left: 238px;
}
.rightUpper {
width: 266px;
}
.rightLower {
width: 266px;
}
.wrapper .leftSide {
margin-top: 24px;
position: absolute;
width: 233px;
left: 0;
}
.wrapper .rightSide {
float: right;
position: absolute;
width: 273px;
left: 445px;
/*top:88px;*/
}
.wrapper {
width: 730px;
height: 155px;
overflow: hidden;
}
#sysit {
margin-left: 35px;
}
#comms {
margin-left: 15px;
}
#collapseExample {
width: 730px;
}
/* GLOBAL CLASSES FOR COMMON ADJUSTMENTS */
.inLine li {
/* Remember to define a width within parent */
display: inline-block;
white-space: nowrap;
}
.borderMe {
border: 2px solid black;
}
.borderMeGreen {
border: 2px solid green;
}
.borderMeRed {
border: 2px solid red;
}
.paddSingleLine {
padding-top: 15px;
padding-bottom: 15px;
}<div class="supContainer">
<button class="btn btn-warning" id="supp" type="button" data-toggle="collapse" data-target="#collapseExample">Support</button>
<div class="collapse borderMe" id="collapseExample">
<li>
<ul>
<br/>
<div class="wrapper inLine borderMe">
<div class="leftSide">
<div class="leftUpper inLine">
<li>
<button class="btn btn-warning" type="button">Capital
<br/>Equipment</button>
</li>
<li>
<button class="btn btn-warning" type="button">Finance
<br/>Process</button>
</li>
</div>
<div class="leftLower inLine">
<li>
<button class="btn btn-warning paddSingleLine" type="button">NDA</button>
</li>
<li>
<button class="btn btn-warning" type="button">QMS
<br/>Update</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">Projects</button>
</li>
</div>
</div>
<div class="supMid">
<li>
<button class="btn btn-warning" id="sysit" type="button">Systems and IT</button>
</li>
<br/>
<li>
<button class="btn btn-warning" id="comms" type="button">Communication
<br/>Relationship/Structure</button>
</li>
<br/>
<li>
<button class="btn btn-warning" type="button">Disaster Recovery Planning</button>
</li>
</div>
<div class="rightSide borderMe">
<div class="rightUpper inLine">
<li>
<button class="btn btn-warning paddSingleLine" type="button">Admin</button>
</li>
<li>
<button class="btn btn-warning" type="button">Recruitment
<br/>/Contractors</button>
</li>
</div>
<div class="rightLower inLine">
<li>
<button class="btn btn-warning" type="button">Export
<br/>Control</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">HR Staff</button>
</li>
<li>
<button class="btn btn-warning paddSingleLine" type="button">HS and E</button>
</li>
</div>
</div>
</div>
</ul>
</li>
</div>
</div>和代碼的輸出的屏幕抓取： 
對不起，草率的代碼，我是新來的這一點。如果你能告訴我我哪裏出了問題，但是爲什麼出問題了，爲什麼解決方案會解決問題，我會很感激，因爲它會幫助我學習。
歡呼聲，並提前致謝。
好吧，我現在就試試這個，請告訴我爲什麼所有的孩子都需要漂浮：左？可能看起來像一個愚蠢的思路，但我認爲它左/右浮動左右位置 –
更新;它工作。非常感謝你對我的一次鬥爭。 –