时间戳

首页 > 解决方案 > 什么是浮动：左；网格中的等效项，因为不支持浮点数？

html - 什么是浮动：左；网格中的等效项，因为不支持浮点数？

问题描述

似乎已经有一些问题围绕着这个问题，但没有一个问题有这个问题的答案......

我有一个 SVG 图像，inline-grid我想把它放在文本的左边，就像我会做的那样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>

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

标签： htmlcsscss-floatcss-gridinline-styles

解决方案

我认为你混合了 inline 和 flex ，它们对布局有不同的方法。其次，您为容器和项目提供了 inline-grid 属性。你想要做的是 "<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>

推荐阅读