display:table-cell下的自适应布局效果实例页面

展示

回到相关文章 »

【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？

//zxx:无论图片宽度多少，布局总是自适应的~~

代码

CSS代码：
<link rel="stylesheet" href="/study/css/zxx.lib.css" type="text/css" />
HTML代码：
<div class="fix auto" style="width:50%;">
    <img id="targetImage" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="128" class="l mr20" />
    <div class="cell">
        <p class="f14">【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？</p>
        <h6 class="f12">//zxx:无论图片宽度多少，布局总是自适应的~~</h6>
    </div>
</div>
JS代码：
//用来改变图片宽度，不是这里重点，您有兴趣直接[右键-页面源代码]即可