css中实现图文混排

在网站或应用界面设计中，图文混排是一个非常重要的元素。图文混排可以让网页看起来更有意义，增强用户体验。实现图文混排可以使用CSS来控制元素的排列，大小，位置，间距等属性。

<style>
.img-text {
display: flex; /* 使用Flex布局 */
align-items: center; /* 垂直居中 */
}
.img-text .img {
flex: 0 1 auto; /* 图片宽度固定，高度自适应 */
margin-right: 20px; /* 图片右侧留出20像素的空白 */
}
.img-text .text {
flex: 1 0 auto; /* 文本宽度自适应，高度自适应 */
}
</style>

<div class="img-text">
<img class="img" src="image.png" alt="Image">
<p class="text">这是一段文字。</p>
</div> 

如上代码所示，通过使用Flex布局，设置.align-items: center;可以实现图片垂直居中显示。接着，通过设置img和text元素的flex属性来确定它们的宽度，高度自适应。最后，通过.text类来控制文字的样式和布局。

在具体实现中，可以结合使用各种CSS属性，如float，clear，margin，padding等，来达到更灵活的效果。同时，在考虑跨浏览器兼容性的情况下，最好使用前缀来规避可能出现的问题。