// HTML代码
<div class="content">
<img src="img/photo.jpg" alt="照片" class="photo">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut posuere nunc. Sed vitae lorem vel neque ullamcorper blandit et nec est. Etiam iaculis velit ut leo finibus, sit amet tincidunt odio ornare. Nunc ultrices mauris non neque interdum, quis malesuada sapien ultricies. Cras sed tempus elit. Fusce laoreet vestibulum tortor vitae rhoncus. Nullam erat elit, porttitor eu tristique sit amet, auctor vel sapien.</p>
</div>
// CSS代码
.content {
display: flex;
align-items: center;
}
.photo {
width: 150px;
margin-right: 30px;
}
.text {
flex: 1;
}代码解释：
首先，大家在HTML中创建一个名为content的块级元素，它包含了一张名为photo的照片和一段名为text的文字。大家使用了flexbox布局来保证这两段内容可以在水平方向上并排显示。
在CSS中，大家将content元素的display属性设置为flex，并使用align-items属性将两段内容在垂直方向上居中对齐。照片元素的宽度设为150px，距离文字元素有30px的空白；而文字元素的flex属性设置为1，即它会占据剩余的空间。
总的来说，这种布局方式比较简单易用，而且也非常适合在文章列表中使用。如果你需要尝试这种布局方式，那么以上代码是一个不错的起点。