非媒体查询下用Flexbox实现图片与自适应文本布局

当然可以！Flexbox天生就是解决这类布局问题的绝佳方案，完全不需要媒体查询就能满足你的所有要求——不管屏幕宽度怎么变，图片和文本都能保持你想要的排列规则，不会出现文本跑到图片下方的情况。

下面是调整后的完整代码，我还修正了你原HTML里的段落嵌套错误：

完整代码示例 #

HTML #

<div class="flex-group">
  <div class="flex-left">
    <img src="http://lorempixel.com/640/480/" alt="示例图片" />
  </div>
  <div class="flex-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi.</p>
    <p>hfbvhjadfbv jsdfbjsdbfbjkvsvd hjfdbg sdbfhj dfhjb dfhjsbjhdv hdf</p>
    <p>Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
  </div>
</div>
<div class="flex-group">
  <div class="flex-left">
    <img src="http://lorempixel.com/640/480/" alt="示例图片" />
  </div>
  <div class="flex-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi.</p>
    <p>hfbvhjadfbv jsdfbjsdbfbjkvsvd hjfdbg sdbfhj dfhjb dfhjsbjhdv hdf</p>
    <p>Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
  </div>
</div>

CSS #

.flex-group {
  display: flex;
  gap: 1em; /* 图片与文本的固定间距，比用padding更直观 */
  margin-bottom: 2em; /* 可选：给每组布局添加底部间距，让内容更清爽 */
}

.flex-left {
  flex: 0 1 20%; /* 初始占20%宽度，允许缩小但禁止放大 */
  min-width: 140px; /* 图片容器的最小宽度限制 */
}

.flex-left img {
  width: 100%; /* 图片填满容器，保持响应式 */
  height: auto; /* 维持图片原有比例，避免变形 */
}

.flex-right {
  flex: 1; /* 自动占用所有剩余水平空间 */
}

.flex-right p:first-of-type {
  margin-top: 0; /* 去掉第一个段落的默认上边距，对齐更整齐 */
}

核心逻辑解释 #

我来拆解下关键属性为什么这么设置：

• display: flex：给父容器开启Flexbox布局后，子元素会自动在水平方向排列，而且默认会保持垂直方向的对齐——这直接解决了浮动布局里文本可能跑到图片下方的问题。
• gap: 1em：直接定义两个子元素之间的间距，不需要像浮动布局那样给文本容器加padding，逻辑更清晰，也不会有额外的布局计算。
• .flex-left 的 flex: 0 1 20%：
  • 0：表示这个容器不允许放大，不会抢占文本容器的空间；
  • 1：表示允许缩小，当屏幕宽度缩小到20%的宽度小于140px时，容器会先缩小到min-width的限制；
  • 20%：是容器的初始基准宽度，满足你“图片宽度为可用水平空间20%”的要求。
• min-width: 140px：确保图片容器不会小于这个值，当屏幕足够窄时，文本容器会自动收缩，而图片保持最小宽度，整个布局不会崩溃。
• .flex-right 的 flex: 1：这个属性让文本容器自动填充所有剩余的水平空间，完美实现你“文本始终占用可用水平空间”的需求。

这个方案完全规避了浮动布局的缺陷，Flexbox的特性天生适配这种需要灵活分配空间且保持稳定排列的场景，而且全程不需要任何媒体查询就能适配各种屏幕宽度。

内容的提问来源于stack exchange，提问作者Madamadam