什么是 float:left;由于不支持浮动，因此在 Grid 中等效？

Question

似乎已经有一些关于此的问题，但是 none 个问题有这个问题的答案...

我在 inline-grid 中有一个 SVG 图像，我想将它放在文本的左侧，就像我在 float:left; 中那样，但似乎有一个已知的导致无法实现的错误。

所以问题是 - 如何将图像放置在左侧，以便它像 float:left; 那样取代左侧的文本？

.company-content {
    width: 79%;
    display: inline-grid;
}

<div class=company-content>
  <p>
    <div style="width:10%; height:10%; display:inline-grid; float:left;"><img src="https://picsum.photos/500" style=" display:flex; width:3rem; height:3rem; align-items:center; float:left;" /> </div>Lorem Ipsum blablabla bla bla bla bla</p>

P.S。是的，我试过了 justify-self:start;，似乎没有用...

Answer 1

我认为你混合了 inline 和 flex，它们有不同的方法到布局。其次，你给了容器和项目两个内联网格属性。而你想要做的是 "<p>" with "<img>" inside a "<div>" but you give "<div>" inside "<p>" you can use "<span>" inside "<p>" 如果我没看错你的要求，下面的代码就是你想要的

.company-content {
    width: 79%;
    display: inline-grid;
}

<div class=company-content>
  
    <p><span style="width:10%; height:10%; "><img src="https://picsum.photos/500" style="width:3rem; height:3rem; float:left" /></span> Lorem Ipsum blablabla bla bla bla bla</p></div>

什么是 float:left;由于不支持浮动，因此在 Grid 中等效？

What's the float:left; equivalent in Grid since float is not supported?

html

css

css-float

inline-styles

css-grid