You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现SVG图片与文本并排布局?(前端新手求助)

SVG与文本并排布局复用问题

我英语不太好,还请见谅。我是HTML & CSS新手,试了网上多种方案都没解决问题。我想实现SVG图片与文本并排的布局效果,首次尝试成功了,但没法把这个效果复用到其他模块里,当前默认生成的布局不符合预期。

可正常工作的代码

CSS

.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; 
}

HTML

<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>

无法正常工作的代码

CSS

.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;
}

HTML

<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>

内容的提问来源于stack exchange,提问作者miruxcld

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.22 01:15:39