css左边图片右边文字布局

在网站设计中，图片与文本是常见的元素。而将图片与文本进行布局是一项重要的任务。在css中，经典的左边图片右边文本布局是一种简单而强大的布局技术。通过使用css，可以轻松实现这种布局效果。

HTML代码如下：
<div class="wrapper">
  <img src="image.jpg" alt="Image">
  <p>图片描述</p>
</div>

CSS代码如下：
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.wrapper img {
  flex: 0 0 auto;
  margin-right: 20px;
}
.wrapper p {
  flex: 1 1 auto;
}

在这段HTML代码中，我们使用了一个wrapper div来包含图片和描述。wrapper div是一个块级元素，它可以使用display: flex属性与CSS flexBox模型来包含它的子元素。通过使用flex-wrap: wrap属性，wrapper div将会允许它的子元素在跨度不足时自动换行。这是必要的，以便在较小的显示器上能够正确显示布局。

接下来，在wrapper div的子元素中，我们使用了img标记来包含图片，p标记来包含图片描述。在CSS代码中，我们首先对wrapper div使用了display: flex属性。这将启用wrapper div的flexBox模型。接着，我们对图片使用了flex: 0 0 auto属性，这将防止图片自动扩展或收缩。同时，我们在图片右侧使用了margin-right: 20px属性，以便在图片和文字之间增加一些空间。

最后，我们对文本使用了flex: 1 1 auto属性。这将告诉wrapper div在可用范围内将所有剩余的空间分配给文本。因此，当浏览器窗口变小时，文本段落将自动适应，并在跨度不足时自动换行。

最终，这种左边图片右边文本布局是一种非常灵活和简单的方法，可以使网站设计更具有吸引力和视觉效果。通过灵活运用CSS技巧，我们可以轻松实现这种布局效果。