有时,我们在做项目时,会遇到这样一种情况——在图文内容中,图片需要放在左边,而文字放在右边,并且文字不会环绕图片。也许大家会觉得这个很简单,图片左浮动,文字右浮动就行了。但问题是,图片的宽度是不确定的,所以包含文字的盒子的宽度也就无法确定。左右浮动的方法在这种情况下是失效的。我将这种情况称为图文自适应布局。对于这种情况,我们可以利用overflow:hidden来实现,对于ie6还需要再加上zoom:1。先看一下代码:

1
2
3
4
5
6
<p>html代码:</p>
<pre class="brush: xhtml">
<div class="box">
<img src="12.jpg" alt="" />
<div class="txt">这是文字的内容</div>
</div></pre>
1
2
3
4
<p>css代码:</p>
<pre class="brush: css">.box{overflow:hidden;zoom:1;width:500px;}
img{float:left;display:inline;}
.txt{overflow:hidden;zoom:1;}</pre>

大家可以点击这里查看一下效果:图文自适应

实际上,以上方法不仅仅用于图文布局。对于左边部分的内容宽度已经确定,而右边文字内容的宽度不确定的情况下,也可以用这种方法。同样,首先看一下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<p>html代码:</p>
<pre class="brush: xhtml">
<div class="box">
<div class="img">
这是一个宽度确定的块级元素
</div>
<div class="txt">
这是不确定宽度的文字内容
</div>
</div>

<div class="box">
<div class="img">
这是一个宽度确定的块级元素
</div>
<span class="inline_txt">
这是不确定宽度的行内元素里的文字内容
</span>
</div>

<div class="box">
<div class="inline_img">
这里宽度确定的行内元素
</div>
<div class="txt">
这是不确定宽度的文字内容
</div>
</div>

<div class="box">
<div class="inline_img">
这里宽度确定的行内元素
</div>
<span class="inline_txt">
这是不确定宽度的行内元素里的文字内容
</span>
</div>
</pre>
1
2
3
4
5
6
<p>css代码:</p>
<pre class="brush: css">.box{overflow:hidden;zoom:1;width:500px;margin:50px 0;}
.img{float:left;display:inline;width:200px;background-color:lightgreen;word-wrap:break-word;}
.txt{overflow:hidden;zoom:1;}
.inline_img{float:left;display:inline;width:200px;background-color:lightgreen;}
.inline_txt{display:block;overflow:hidden;zoom:1;}</pre>

大家可以点击这里查看一下效果:图文自适应

从以上的例子可以看出,要实现图文自适应布局,需要满足以下条件:
(为了说明方便,以下用元素的类名来代表该元素)

1、box需清除内部浮动,可用本文的overflow:hidden;zoom:1;的方法来清除。

2、img要设置浮动,按本文的例子,即设为左浮动,若img不是图像,则还需要确定宽度。

3、txt需要用overflow:hidden来实现文字浮动到图像右边的效果;在ie6下,overflow:hidden是无效的,需要用zoom:1来代替;若txt部分为行内元素,还需要把这个元素转换成为块级元素,不然文字将会环绕图像。