CSS中可以使用左文右图排版,让文字和图片并排显示,使得页面更加美观。下面是使用CSS实现左文右图排版的代码: <div class= wrap > <img
CSS中可以使用左文右图排版,让文字和图片并排显示,使得页面更加美观。下面是使用CSS实现左文右图排版的代码:
<div class="wrap"> <img src="image.jpg" alt="图片"> <p>这是一段文字</p> </div> .wrap { display: flex; align-items: center; } img { margin-right: 20px; }
上面的代码使用了flex布局实现左文右图排版。将图片和段落放在一个div容器中,然后设置容器的display为flex,让容器内元素实现水平方向排列。同时,使用align-items:center让图片和文字垂直居中。
接着,将图片的右边距设置为20px,使得图片和文字之间有一定的间距。通过这样的代码实现,就可以轻松实现左文右图排版。
粉丝
0
关注
0
收藏
0