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代码:
//用来改变图片宽度,不是这里重点,您有兴趣直接[右键-页面源代码]即可