如何实现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. ✅</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. 🏡 </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
相关产品推荐
相关产品推荐

