如何将图像（svg）放在文本旁边？

Question

首先，对不起我的英语不好，希望我写得很好。 我在这个 web 上尝试了很多解决方案，但我无法解决我的问题。

我是 HTML 和 CSS 的初学者，所以也许这就是原因。 我是新手，正在努力改进。 我将非常感谢您的帮助。

我想要做的是获得这样的设计：我的第一次尝试成功了，但我无法在其他图像中复制这种外观：

我试图复制 CSS 属性这就是它的默认生成方式（我不知道如何从上面获得相同的设计）：

这是codeshare 上工作部分的 HTML/CSS，这是 codeshare上的非工作代码。

如果链接不起作用，这是不起作用的替代代码：

 <style>.info2 { display: inline-block; font-family: 'Staatliches', cursive; font-size: 25px; } div.info2 { display: inline-block; width: 170px; height: 50px; }.resp2 { display: inline-block; font-family: roboto; padding: 2px; width: 200px; }.info3 { display: inline-block; font-family: 'Staatliches', cursive; font-size: 25px; } div.info3 { display: inline-block; width: 210px; height: 50px; } div.info3resp3 { display: inline-block; }.resp3 { display: inline-block; font-family: roboto; padding: 2px; width: 200px; } </style>

 <div class="info2resp2"> <div class="info2"> <p>Vende/Compra tu casa</p> </div> <div class="icon2-div"> <img class="icon2" src="/icons/icon2svg.svg" alt=""> </div> <div class="resp2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper purus ac erat dignissim, non gravida dui ullamcorper. In suscipit. &#127969 </p> </div> </div> <div class="info3resp3"> <div class="icon3-div"> <img class="icon3" src="/icons/icon3svg.svg" alt=""> </div> <div class="info3"> <p>Todo detallado</p> </div> <div class="resp3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper purus ac erat dignissim, non gravida </p>

有效的代码：

 <style>.info1 { display: inline-block; font-family: 'Staatliches', cursive; font-size: 25px; } div.info1 { display: inline-block; width: 170px; height: 50px; }.resp1 { display: inline-block; font-family: roboto; padding: 2px; width: 200px; } div.resp1 { display: inline-block; width: 200px; } </style>

 <div class="info1resp1"> <img class="icon1" src="/icons/icon1svg.svg" alt=""> <div class="info1"> <p>Perfiles Seguros</p> </div> <div class="resp1"> <p>Asociados a un RUT verificado asociado a la cédula de identidad, puedes confiar en que estés hablando con una persona real y tendrás acceso a algunos de sus datos importantes. &#9989</p> </div>

Answer 1

我认为你应该学习使用flex和grid进行布局。

 .card { background-color: black; width: 240px; height: 270px; display: flex; }.icon1{ width: 75px; height: 75px; }.wrapper { } p{ color: white; }.wrapper p:nth-child(1){ margin: 20px 0; } *{ box-sizing: border-box; padding: 0; margin: 0; }

 <div class="card"> <img class="icon1" src="https://via.placeholder.com/150.svg" alt=""> <div class="wrapper"> <p>Perfiles Seguros</p> <p>Asociados a un RUT verificado asociado a la cédula de identidad, puedes confiar en que estés hablando con una persona real y tendrás acceso a algunos de sus datos importantes. &#9989</p> </div> </div>

Answer 2

您是否尝试过将图像浮动到文本的任一侧？ 见这里：浮动