renektonking 2022-04-19 22:47 采纳率: 75%
浏览 60
已结题

linux图片以及文字的位置

以下两种情况要怎么实现，不能用嵌入式，所有样式放在另外创建的css文件中

1、图片文字分左右 也就是一边文字一边是图片（我试着用 align="left"才发现h5已经不支持用align了，不知道还有什么方法？）文字和图片中间的区域有空白

大概呈现这种效果：

img

2、文字在同一行分为三个部分，每个部分的首字对齐，每个部分之间有空白：

img

麻烦各位专家解答并稍微解释一下，谢谢！

  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2022-04-19 23:18
    关注

    img图片用float: left;浮动即可 ,图片右边区域空白用margin-right: 50px;设置
    A.html的代码

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <img src="1.jpg" class="pic" alt="" />
    <p>文字</p>
    <p>第二行文字</p>
    <p>第三行文字</p>
</body>
</html>

    style.css

    img.pic {
    float: left;
    width: 300px;
    margin-right: 50px;
}

    img

    第二个实现的方法很多,,最好理解的是 span 用display: inline-block;转成行内块元素,并设置固定的width

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="box">
       <p><span>第1行1列</span><span>第1行</span><span>第1行3列</span></p>
       <p><span>第2行</span><span>第2行第2列</span><span>第2行3列</span></p>
       <p><span>第3行1列</span><span>第3行</span><span>第3行3列</span></p>
    </div>
</body>
</html>

    style.css

    .box span {
    display: inline-block;
    width: 300px;
    margin-right: 20px;
}

    img

    如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月26日
  • 已采纳回答 4月26日
  • 修改了问题 4月19日
  • 修改了问题 4月19日
  • 展开全部

悬赏问题

  • ¥15 求帮我调试一下freefem代码
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图