CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

下面是“CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）”的完整攻略。

简介

在网页制作中，经常会涉及到图文混排的情况，我们希望能够让文本自适应图片的宽度，使得排版更加美观。那么本文将会详细讲解如何实现这个功能。

步骤

第1步：HTML结构

在HTML中，首先我们需要将图片包裹在一个div内：

<div class="image-wrapper">
  <img src="example.jpg" alt="example">
</div>

第2步：CSS代码

在CSS中，我们要做的就是设置图片宽度为100%，以及将图片所在的div设置为display: table。代码如下：

.image-wrapper {
  display: table;
  width: 100%;
}

.image-wrapper img {
  width: 100%;
}

通过将div设置为display: table，我们可以让div自动适应父元素的宽度。而将img的宽度设置为100%，则实现了图片宽度的自适应。

示例1：左右结构图文混排

下面我们来看一个典型的左右结构的图文混排布局，示例代码如下：

<div class="clearfix">
  <div class="image-wrapper">
    <img src="example.jpg" alt="example">
  </div>
  <div class="text">
    <p>这里是文本内容</p>
  </div>
</div>

对应的CSS代码如下：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.image-wrapper {
  width: 30%;
  display: table;
}

.image-wrapper img {
  width: 100%;
}

.text {
  width: 70%;
  float: right;
}

在示例代码中，我们将文本容器设置为float: right，这样可以实现一个左侧图片，右侧文本的排版效果。

示例2：上下结构图文混排

下面我们再看一个典型的上下结构的图文混排布局，示例代码如下：

<div class="clearfix">
  <div class="image-wrapper">
    <img src="example.jpg" alt="example">
  </div>
  <div class="text">
    <p>这里是文本内容</p>
  </div>
</div>

对应的CSS代码如下：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.image-wrapper {
  width: 100%;
  display: table;
}

.image-wrapper img {
  width: 100%;
}

.text {
  width: 100%;
  display: table;
}

在示例代码中，我们将图片容器和文本容器都设置为display: table，这样可以实现一个上下排列的图文混排效果。

总结

通过本文的讲解，我们学会了如何在CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）。无论是左右结构还是上下结构的图文混排布局，都可以通过简单的CSS代码就实现文本自适应图片宽度的效果。