在
有时，我们在做项目时，会遇到这样一种情况——在图文内容中，图片需要放在左边，而文字放在右边，并且文字不会环绕图片。也许大家会觉得这个很简单，图片左浮动，文字右浮动就行了。但问题是，图片的宽度是不确定的，所以包含文字的盒子的宽度也就无法确定。左右浮动的方法在这种情况下是失效的。我将这种情况称为图文自适应布局。对于这种情况，我们可以利用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部分为行内元素，还需要把这个元素转换成为块级元素，不然文字将会环绕图像。
作者
admin@wordpress.com