在网页设计中,我们常常需要实现左图右文字的显示效果。这种设计风格既可以用于产品介绍也可以用于文章内容展示,让整个页面看起来更加美观大方。那么,在CSS中,我们该怎么编辑左图右文字呢?首先,我们需要确定
.container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .image { width: 40%; max-width: 500px; height: auto; } .text { width: 55%; max-width: 700px; }
.image img { width: 100%; height: auto; display: block; }
.text h2 { font-size: 30px; margin-bottom: 20px; } .text p { font-size: 18px; line-height: 1.5; color: #666; }
<div class="container"> <div class="image"> <img src="image.jpg" alt="img"> </div> <div class="text"> <h2>这里是标题</h2> <p>这里是文本内容,用来介绍产品的特点或者展示文章摘要等等。</p> </div> </div>
粉丝
0
关注
0
收藏
0