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

【问题标题】：How to put images (svg) beside text?如何将图像（svg）放在文本旁边？
【发布时间】：2022-08-18 15:09:33
【问题描述】：

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

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

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

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

这里是the HTML/CSS of the working part on codeshare，这里是the non-working code on 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>

标签： html css image

【解决方案1】：

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

【讨论】：

你好。非常感谢您的回答。我试过了，它变得更接近我想要的，所以再次感谢您的推荐！现在唯一的问题是......图标，我也将它们添加到左侧的 float 属性，但它们并没有完全放在文本旁边。你知道为什么会这样吗？ i.postimg.cc/JhBby6N7/3.png

【解决方案2】：

我认为你应该学习使用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>

【讨论】：