使用 CSS 实现响应式文本和图像布局-html教程-PHP中文网

使用 CSS 实现响应式文本和图像布局

霞舞

发布： 2025-08-29 19:38:01

原创

782人浏览过

使用 css 实现响应式文本和图像布局

本文旨在解决使用 CSS 创建响应式文本和图像布局时遇到的常见问题。我们将探讨如何利用 Flexbox 实现左右分栏布局，并确保图像在不同屏幕尺寸下都能保持适当的比例和显示效果。通过优化 CSS 代码和减少不必要的媒体查询，我们可以创建一个简洁、高效且易于维护的响应式布局。

使用 Flexbox 创建响应式布局

Flexbox 是一种强大的 CSS 布局模块，可以轻松创建灵活且响应式的布局。以下是如何使用 Flexbox 创建左右分栏布局，其中包含文本和图像，并且在不同屏幕尺寸下都能良好地适应：

HTML 结构

首先，我们需要一个包含左右两个分栏的容器。每个分栏包含文本内容和图像。

<div class="container">
  <div class="col-left box">
    <div class="containers">
      <div class="main">
        <label class="title">左侧文本内容</label>
      </div>
    </div>
    <div class="content">
      <div class="text">
        <label class="title">更多左侧文本内容</label>
      </div>
    </div>
  </div>
  <div class="col-right box">
    <img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg" alt="示例图片" />
  </div>
</div>

登录后复制

CSS 样式

接下来，我们使用 CSS 来定义容器和分栏的样式，并确保图像的响应性。

立即学习“前端免费学习笔记（深入）”；

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

.container {
  display: flex;
}

.box {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 0;
}

* {
  box-sizing: border-box;
  outline: 0;
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
}

.col-left {
  background: black;
  box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
  width: 50%;
}

.col-right {
  width: 50%;
  height: auto;
}

.col-right img {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

label {
  display: inline-block;
  max-width: 100%;
}

.container .main:after {
  clear: both;
  display: block;
  content: '';
}

.main {
  text-align: center;
  height: 120px;
}

.text {
  text-align: center;
  height: 213px;
}

.title {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  overflow-wrap: break-word;
  padding: 5px;
}

.author {
  font-family: 'Inter-Regular';
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
  color: #FFFFFF;
  margin-top: 48px;
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .col-left {
    width: 100%; /* 调整左侧栏宽度 */
  }
  .col-right {
    width: 100%; /* 调整右侧栏宽度 */
  }
}

登录后复制

关键点：