极客观点
项目管理
HarmonyOS
我希望图片和文字能够相互对齐（PC端），如下图：
（使用 flex 后不能顶端对齐，采用 inline-block 并且 vertical-align:middle;也不行......一直都显示如下图）
代码如下,HTML 部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>MY FAVOURITE APP</h1>
</header>
<div class="app">
<div class="image">
<img src="images/app.png" alt="picture">
</div>
<div class="description">
<p>
In ac ipsum quis turpis adipiscing commodo. <em>Mauris fermentum quam</em> in risus eleifend fringilla. Aliquam placerat, ipsum sit amet cursus rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend lectus nec diam ornare, eu placerat mi ultricies. Etiam tempor iaculis feugiat. Ut tincidunt tempus libero non convallis. Morbi consequat eros eget elit porta porta. Curabitur placerat eros dui, vitae lobortis sapien laoreet ac. Maecenas a lacus diam. Morbi ante lectus, ornare sed suscipit at, tempus elementum purus. Suspendisse sodales hendrerit pharetra. Integer odio risus, convallis eu egestas ad, venatis nec leo. ac ipsum quis turpis adipiscing commodo. <em>Mauris fermentum quam</em> in risus eleifend fringilla. <a href="#">Aliquam placerat</a>, ipsum sit amet cursus rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend lectus nec diam ornare, eu placerat mi ultricies. Etiam tempor iaculis feugiat. Ut tincidunt tempus libero non convallis. Morbi consequat eros eget elit porta porta. Curabitur placerat eros dui, vitae lobortis sapien laoreet ac. Maecenas a lacus diam. Morbi ante lectus, ornare sed suscipit at, tempus elementum purus. Suspendisse sodales hendrerit pharetra. Integer odio risus, convallis eu egestas ac, venenatis nec leo.
</p>
</div>
</div>
</body>
</html>CSS 部分：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
color: white;
background-color: #33BEBE;
}
.app {
display: -webkit-flex;
display: flex;
}
.description {
padding-left: 20px;
color: #7C8B88;
max-width: 705px;
}
.image {
max-width: 460px;
}
首先 你要保证默认元素的margin 去掉（reset）
flex 有一套对齐的标准参数。