第一种:采用display:table-cell;的方式实现自适应布局 特点是图片变大文字变窄,行数变多。文字靠上与图片对齐,文字与图片不等高
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*基于display:table-cell的自适应布局*/
.cell {
display:table-cell;
*display:inline-block;
width:2000px;
*width:auto;
}
</style>
</head>
<body>
<div style="width:50%;">
<img id="targetImage" src="mm1.jpg" width="128" class="l mr20" />
<div class="cell"> 【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里,看中什么物件,只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台,换一个古筝演奏家登台时佩戴的耳环;用一台Lomo相机,换几张爱情主题的邮票…你想交换什么?
</div>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
widthInitImage = 0, isBeingLarge = true;
var funWidthImage = function() {
var widthImage = eleImage.width;
if (isBeingLarge) {
widthImage += 2;
if (widthImage > 256) {
widthImage = 256;
isBeingLarge = false;
}
} else {
widthImage -= 2;
if (widthImage < widthInitImage) {
widthImage = widthInitImage;
isBeingLarge = true;
}
}
eleImage.width = widthImage;
setTimeout(funWidthImage, 50);
};
if (eleImage) {
widthInitImage = eleImage.width;
funWidthImage();
}
</script>
</body>
</html>
第二种:采用图片左浮动,文字overflow:hidden;的方式实现自适应布局,图片放大文字宽度变小,高度和图片等高,上下都对齐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.demo {
width:500px;
margin:32px auto;
}
.demo img {
float:left
}
.cell {
overflow:hidden;
}
</style>
</head>
<body>
<div class="demo"> <img id="targetImage" src="mm1.jpg" width="128" class="l mr20" />
<p class="cell"> 【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里,看中什么物件,只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台,换一个古筝演奏家登台时佩戴的耳环;用一台Lomo相机,换几张爱情主题的邮票…你想交换什么? </p>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
widthInitImage = 0, isBeingLarge = true;
var funWidthImage = function() {
var widthImage = eleImage.width;
if (isBeingLarge) {
widthImage += 2;
if (widthImage > 256) {
widthImage = 256;
isBeingLarge = false;
}
} else {
widthImage -= 2;
if (widthImage < widthInitImage) {
widthImage = widthInitImage;
isBeingLarge = true;
}
}
eleImage.width = widthImage;
setTimeout(funWidthImage, 50);
};
if (eleImage) {
widthInitImage = eleImage.width;
funWidthImage();
}
</script>
</body>
</html>