Image Left Text Right CodePen

如果你是一个前端开发人员，那么你可能已经知道了CodePen的存在。它可以让你轻松地展示你的前端项目，分享你的代码片段，与其他人互动讨论你的项目等等。在这篇文章中，我们将重点介绍 CodePen 中的“Image Left Text Right”主题。

简介

“Image Left Text Right”是一个常见的页面布局。它使得在页面的左侧插入一张图片，右侧添加文字变得更容易。

在 CodePen 中，有很多用户使用这个布局来展示他们的项目和作品。

如何实现“Image Left Text Right”

实现“Image Left Text Right”的方式通常是在HTML中使用 <img> 标签来插入图片，然后使用 <div> 或者 <p> 标签添加文本内容。使用 CSS 来对这些标签进行布局。

HTML

<div class="container">
  <img src="example.jpg" alt="example image">
  <div class="text">
    <h2>Title Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed faucibus nulla, nec pretium turpis.</p>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

img {
  max-width: 50%;
  height: auto;
}

.text {
  max-width: 45%;
}

在这个样例中，我们使用了 flexbox 来对整个容器进行排版，让图片和文本水平排列。图片的大小被限制在整个容器的一半，文本内容最大宽度为45%。

在CodePen中尝试

你可以在 CodePen 中创建自己的“Image Left Text Right”示例，进行尝试。

以下是一个快速创建的带有“Image Left Text Right”布局的代码片段：

HTML

<div class="container">
  <img src="https://picsum.photos/200/300" alt="example image">
  <div class="text">
    <h2>Title Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed faucibus nulla, nec pretium turpis.</p>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

img {
  max-width: 50%;
  height: auto;
}

你可以在这个 示例中 进行尝试。

结论

“Image Left Text Right”是一种常见的页面布局方式，它可以非常清晰地展示文本和图像。在 CodePen 中，你可以轻松地分享你的“Image Left Text Right”设计，并与其他人互动。