Html 使用css网格将div定位到div内部

我的旗帜下有一节。它有背景，分为三个要素。我使用网格将它们放置在内联位置，但我的第一部分是图像而不是文本，然后是img，第二部分是图像和文本，第三部分是文本。就像你在下面看到的那样，我怎样才能把所有的东西都放进去？我真的不知道网格中的值，如何以及何时使用，你能给我解释一下吗

代码如下：

.旗下{ 背景色：edf1f3； 高度：102px； 显示：-ms网格； 显示：网格； -ms网格柱：1fr 1fr 1fr； 网格模板柱：1fr 1fr 1fr； -ms网格行：1； 网格行：1； } .banner位于.banner内容下{ z指数：2； 文本对齐：居中； 高度：35px； } .banner下的.banner内容p{ 字体系列：Sintony； 字号：700； 字体大小：14px； 填充：20px 5px； } .标题下的.标题内容h3{ 字体系列：Sintony； 字号：700； 字体大小：35px； } .banner下的.banner内容img{ 高度：35px； 填充顶部：10px； } .banner下的.banner内容范围{ 颜色：fea100； } @介质最大宽度：996px{ .banner位于.banner内容下{ 左：20%； } } 阅读 评论

现在给我们打电话 送货上门

1-088 005 006

---

您需要告诉p标记显示为内联块，否则它会自动占据100%的宽度

请看这里：

.banner-under .banner-content p {
   font-family: "Sintony";
   font-weight: 700;
   font-size: 14px;
   padding: 20px 5px;
   display: inline-block;
}

下面是用这个方法编译的所有代码的一个片段，单击底部的蓝色按钮可以看到它正在工作

.旗下{ 背景色：edf1f3； 高度：102px； 显示：-ms网格； 显示：网格； -ms网格柱：1fr 1fr 1fr； 网格模板柱：1fr 1fr 1fr； -ms网格行：1； 网格行：1； } .banner位于.banner内容下{ z指数：2； 文本对齐：居中； 高度：35px； } .banner下的.banner内容p{ 字体系列：Sintony； 字号：700； 字体大小：14px； 填充：20px 5px； 显示：内联块； } .标题下的.标题内容h3{ 字体系列：Sintony； 字号：700； 字体大小：35px； } .banner下的.banner内容img{ 高度：35px； 填充顶部：10px； } .banner下的.banner内容范围{ 颜色：fea100； } @介质最大宽度：996px{ .banner位于.banner内容下{ 左：20%； } } 阅读 评论

现在给我们打电话 送货上门

1-088 005 006

---

隐马尔可夫模型。。。是否希望每个项目都对齐在同一行中？如果是这样，我认为Flexbox在这种情况下比Grid更好