m0_69817281 2022-06-14 21:04 采纳率: 100%
浏览 33
已结题

求解怎么把两个图片和两段话放在同一行

img


就是把马尔高和那段话放在白胡子那段话旁边同行并列求讲一下咯难搞哦

  • 写回答

3条回答 默认 最新

  • 偷拨网线的william 2022-06-14 21:27
    关注

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下。
    目前使用3种方法实现,我用百度图片作为示例。
    1.添加CSS属性

    vertical-align:middle;
    
    <style>
      a img {
        border: none;
      }
    
      .testdiv * {
        vertical-align: middle;
      }
    </style>
    
    <div class="testdiv">
      <a href="https://www.baidu.com/"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="这里是图片" /></a>
      <span>这里是文字,看看文字对齐了没</span>
    </div>
    
    
    

    2.div嵌套
    将图片和文字分别套上一个div,就可以利用 margin 熟悉任意定位了

    
    <style>
      a img {
        border: none;
      }
    
      .testIMG {
        float: left;
        display: inline;
        margin-top: 0;
        margin-left: 5px;
      }
    
      .testTXT {
        float: left;
        display: inline;
        margin-top: 20;
        margin-left: 5px;
      }
    </style>
    
    <div class="testdiv">
      <div class="testIMG">
        <a href="https://www.baidu.com/"
          ><img
            src="https://www.baidu.com/img/flexible/logo/pc/result.png"
            alt="这里是图片"
        /></a>
      </div>
      <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
    </div>
    
    

    3.把图片作为背景
    如果你的图片只是用来作为小图标放在文字的左侧,那就推荐用这个方法,图片设置成文字的背景,不循环,定位在左侧上下居中,文字向左padding图片的宽度加几个像素。

    
    <style>
      a img {
        border: none
      }
    
      .testTXT {
        height: 68px;
        line-height: 60px;
        padding-left: 220px;
        background: url(https://www.baidu.com/img/flexible/logo/pc/result.png) no-repeat left center
      }
    </style>
    
    <div class="testdiv">
      <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
    </div>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 6月23日
  • 已采纳回答 6月15日
  • 创建了问题 6月14日

悬赏问题

  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)