Html div不在父div内浮动，带显示内联块

我想使两个子div都在红色框中内联

.parent{
宽度：35%；
高度：200px；
背景色：红色；
显示：内联块；
保证金：30px自动
}
.家长组{
显示：内联块；
}

---

看起来像这样

.parent{
宽度：35%；
高度：200px；
背景色：红色；
显示：内联块；
保证金：30px自动
}
.家长组{
浮动：左；
宽度：50%；
填充物：5px；
框大小：边框框
}

---

您的元素实际上是浮动的，问题是如果您检查子div，您会看到它们的宽度是100%，因此看起来它们不是浮动的，而不是将

宽度：30%

赋予图像，您必须将其赋予其父级（子div）和

宽度：100%

赋予图像

.parent {
  width : 35%;
    height : 200px;
    background-color : red;
    display : inline-block;
    margin : 30px auto
}
.parent div {
  display : inline-block;
  width:30%;
}

---

只需删除

float:left来自
.parent div
并更改
.parent div
样式
显示：内联块到
显示：内联


.parent{
宽度：35%；
高度：200px；
背景色：红色；
显示：内联块；
保证金：30px自动
}
.家长组{
显示：内联；
}

之所以会发生这种情况，是因为
img
是一个具有自身内在维度的模型：

在CSS中，被替换的元素是其表示超出CSS范围的元素；它们是外部对象，其表示独立于CSS格式模型。典型的更换元件包括：
，
，
，

以及：

CSS在某些情况下会专门处理替换的元素，比如
计算边距和一些自动值

请注意，如果此处有文本而不是图像，则它将按需要工作：


.parent{
宽度：35%；
高度：200px；
背景色：红色；
显示：内联块；
保证金：30px自动
}
.家长组{
显示：内联块；
}

文本1
文本2
希望这对您有所帮助。
我补充说

.家长组{
宽度：100%；}

及

.parent div img{width:50%；float:left；}


.parent{
宽度：35%；
高度：200px；
背景色：红色；
显示：内联块；
保证金：30px自动
}
.家长组{
宽度：100%；
}
.parent div img{width:50%；float:left；}

谢谢，您的代码非常简单易读，但我仍然需要理解我最终理解的解释，所以问题是我没有指定
img
所在的
div
的
width
，因此默认情况下
div width
是100%，无论
img width
是否为其
div
的30%，这都无关紧要，因为
div
本身占据了整个红盒，这正是正在发生的事情