linux图片以及文字的位置

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

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

大概呈现这种效果：

img

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

img

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

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

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632