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>和代码的输出的屏幕抓取： 
对不起，草率的代码，我是新来的这一点。如果你能告诉我我哪里出了问题，但是为什么出问题了，为什么解决方案会解决问题，我会很感激，因为它会帮助我学习。
欢呼声，并提前致谢。
好吧，我现在就试试这个，请告诉我为什么所有的孩子都需要漂浮：左？可能看起来像一个愚蠢的思路，但我认为它左/右浮动左右位置 –
更新;它工作。非常感谢你对我的一次斗争。 –