Html 子DIV落在父DIV之外

因此，我的父DIV包含3个主DIV，每个主DIV包含一对

DIV

。我将父

li

元素内联显示，因为我希望所有3个嵌套的

div

沿着父元素的宽度并排显示。我已经成功地把前两个排好了。第三个div具有正确的x轴定位，但在y轴上它已下降并位于父div之外，我不确定哪里出错。我在StackOverflow上尝试了许多不同的解决方案，但是没有一个成功

我将右侧div（位于父对象下方的div）设置为absolute（绝对），如果不是，则无法获得正确的x轴，使用absolute（绝对）时，它将获得正确位置的一半

相关代码：

.supContainer{
位置：绝对位置；
顶部：900px；
左：38%；
宽度：400px；
}
超级集装箱{
列表样式类型：无；
左侧填充：0px；
保证金：0；
}
李先生{
显示：内联块；
空白：nowrap；
边缘顶部：10px；
右边距：10px；
}
#供应{
左边距：295px；
}
.左上角{
宽度：233px；
左侧填充：47px；
}
.左下{
宽度：233px；
垫底：10px；
}
苏米德先生{
浮动：无；
右边距：5px；
宽度：201px；
左侧填充：238px；
}
.右上角{
宽度：266px；
}
.右下{
宽度：266px；
}
.wrapper.左边{
利润上限：24px；
位置：绝对位置；
宽度：233px；
左：0；
}
.wrapper.右侧{
浮动：对；
位置：绝对位置；
宽度：273px；
左：445px；
/*顶部：88px*/
}
.包装纸{
宽度：730px；
高度：155px；
溢出：隐藏；
}
#西西特{
左边距：35px；
}
#通信{
左边距：15px；
}
#衣领标本{
宽度：730px；
}
/*通用调整的全局类*/
李先生{
/*请记住在父级中定义宽度*/
显示：内联块；
空白：nowrap；
}
.我{
边框：2件纯黑；
}
梅格林先生{
边框：2倍纯绿；
}
.带边框{
边框：2倍纯红；
}
A.单线{
填充顶部：15px；
垫底：15px；
}

支持





首都

设备


财务

过程


保密协议


质量管理体系

更新


项目


系统和信息技术




沟通

关系/结构




灾难恢复规划


管理


招聘

/承包商


出口

控制


人力资源部员工


HS和E

试试这个

Give.supMid属性显示：内联块

.supMid{
 float:none;
 display: inline-block;
 margin-right:5px;
 width:201px;
 padding-left:238px;
}

只需将垂直对齐：从顶部到右侧。不需要位置来设置元素

.wrapper .rightSide {
  float: right;
  width: 250px;
  vertical-align: top;
}

试试这个

Give.supMid属性显示：内联块

.supMid{
 float:none;
 display: inline-block;
 margin-right:5px;
 width:201px;
 padding-left:238px;
}

只需将垂直对齐：从顶部到右侧。不需要位置来设置元素

.wrapper .rightSide {
  float: right;
  width: 250px;
  vertical-align: top;
}

---

你把它搞砸了

位置：绝对

。检查下面的解决方案

只需更新：

.supMid {
  float: left;
  margin-right: 5px;
  width: 201px;          
}
.wrapper .leftSide {
  position: relative;
  width: 233px;
  float: left;
}
.wrapper .rightSide {
  float: left;
  position: relative;
  width: 273px;
}
.wrapper {
  width: 730px;
  height: 155px;
  overflow: hidden;
  padding-top: 10px;
}

.supContainer{
位置：绝对位置；
顶部：900px；
左：38%；
宽度：400px；
}
超级集装箱{
列表样式类型：无；
左侧填充：0px；
保证金：0；
}
李先生{
显示：内联块；
空白：nowrap；
边缘顶部：10px；
右边距：10px；
}
#供应{
左边距：295px；
}
.左上角{
宽度：233px；
左侧填充：47px；
}
.左下{
宽度：233px；
垫底：10px；
}
苏米德先生{
浮动：左；
右边距：5px；
宽度：201px；
}
.右上角{
宽度：266px；
}
.右下{
宽度：266px；
}
.wrapper.左边{
位置：相对位置；
宽度：233px；
浮动：左；
}
.wrapper.右侧{
浮动：左；
位置：相对位置；
宽度：273px；
}
.包装纸{
宽度：730px；
高度：155px；
溢出：隐藏；
填充顶部：10px；
}
#西西特{
左边距：35px；
}
#通信{
左边距：15px；
}
#衣领标本{
宽度：730px；
}
/*通用调整的全局类*/
李先生{
/*请记住在父级中定义宽度*/
显示：内联块；
空白：nowrap；
}
.我{
边框：2件纯黑；
}
梅格林先生{
边框：2倍纯绿；
}
.带边框{
边框：2倍纯红；
}
A.单线{
填充顶部：15px；
垫底：15px；
}

支持