sample-1缺点 ＋ 必须固定高度

dabblet.css

body {
  width: 600px;
  font:normal 14px/1.62 arial, sans-serif;
}
.mod { 
  margin-bottom:100px;
  background-color:#efc;
}
.pic {
  margin-right: 20px;
}
.title {
  margin-bottom: 1em;
  font-size: 18px;
}






/*-----------------------------*/





#sample-1 { zoom:1; }
#sample-1:after { content:'\0020';display:block;clear:both; }
#sample-1 .pic {
  float: left;
}
#sample-1 .intro {
  margin-left: 220px; /* 固定的pic宽度 + 固定的pic的margin-right */
}








#sample-2 { zoom:1; }
#sample-2:after { content:'\0020';display:block;clear:both; }
#sample-2 .pic {
  float: left;
}
#sample-2 .intro {
  /* 触发BFC: http://image.slidesharecdn.com/fetrainning-110825233037-phpapp02/95/slide-45-728.jpg?1314333288 */
  /* overflow: hidden; */
  display: table-cell; /* 宽度为实际内容的宽度 */
  zoom: 1;
}






/* sample-1缺点 ＋ 必须固定高度 */
#sample-3 {
  position: relative;
}
#sample-3 .pic {
  position: absolute;
  top: 0;
  left: 0;
}
#sample-3 .intro {
  margin-left: 220px; 
  zoom: 1;
}






#sample-4 { zoom:1; }
#sample-4:after { content:'\0020';display:block;clear:both; }
#sample-4 .pic {
  float: left;
}
#sample-4 .intro {
  float: left;
  width: 380px; /* 固定宽度，且宽度是经过容器度减图片宽再减图片margin算 */
}







/* 最复古的table方式 */
#sample-5 {
  border-collapse:collapse;
  table-layout:fixed;
}
#sample-5 td.pic {
  padding-right: 20px;
  vertical-align: top;
}
#sample-5 .intro {}








/* 
flexible box layout
*/
#sample-6 {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */     
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#sample-6 .intro {
   width: 380px; /* 需要固定宽度 */
}

dabblet.html

<div id="sample-1" class="mod">
<div class="pic">
  <img src="http://dummyimage.com/200x100/003dd6/fff">
</div>
<div class="intro">
<div class="title">
<a href="">“青春大金矿”（<北京青年报>专访）</a>
</div>
<p>去见私奔锦的那天，天很平，坐了约一个小时的公车。北京798艺术区附近的居民楼有着老北京的闲散和古旧。初秋的阳光妩媚而有张力，80年代遗留下来的洗衣厂，门口下棋的老人，头顶交织的电线，干净的台阶…… 我们穿过午后的风拐进一条悠长的胡同...</p>
</div>
</div>







<div id="sample-2" class="mod">
<div class="pic">
  <img src="http://dummyimage.com/200x100/003dd6/fff">
</div>
<div class="intro">
<div class="title">
<a href="">“青春大金矿”（<北京青年报>专访）</a>
</div>
<p>去见私奔锦的那天，天很平，坐了约一个小时的公车。北京798艺术区附近的居民楼有着老北京的闲散和古旧。初秋的阳光妩媚而有张力，80年代遗留下来的洗衣厂，门口下棋的老人，头顶交织的电线，干净的台阶…… 我们穿过午后的风拐进一条悠长的胡同...</p>
</div>
</div>








<div id="sample-3" class="mod">
<div class="pic">
  <img src="http://dummyimage.com/200x100/003dd6/fff">
</div>
<div class="intro">
<div class="title">
<a href="">“青春大金矿”（<北京青年报>专访）</a>
</div>
<p>去见私奔锦的那天，天很平，坐了约一个小时的公车。北京798艺术区附近的居民楼有着老北京的闲散和古旧。初秋的阳光妩媚而有张力，80年代遗留下来的洗衣厂，门口下棋的老人，头顶交织的电线，干净的台阶…… 我们穿过午后的风拐进一条悠长的胡同...</p>
</div>
</div>







<div id="sample-4" class="mod">
<div class="pic">
  <img src="http://dummyimage.com/200x100/003dd6/fff">
</div>
<div class="intro">
<div class="title">
<a href="">“青春大金矿”（<北京青年报>专访）</a>
</div>
<p>去见私奔锦的那天，天很平，坐了约一个小时的公车。北京798艺术区附近的居民楼有着老北京的闲散和古旧。初秋的阳光妩媚而有张力，80年代遗留下来的洗衣厂，门口下棋的老人，头顶交织的电线，干净的台阶…… 我们穿过午后的风拐进一条悠长的胡同...</p>
</div>
</div>





<table id="sample-5" class="mod" cellpadding="0" cellspcing="0">
<tr>
<td class="pic">
  <img src="http://dummyimage.com/200x100/003dd6/fff">
</td>
<td class="intro">
<div class="title">
<a href="">“青春大金矿”（<北京青年报>专访）</a>
</div>
<p>去见私奔锦的那天，天很平，坐了约一个小时的公车。北京798艺术区附近的居民楼有着老北京的闲散和古旧。初秋的阳光妩媚而有张力，80年代遗留下来的洗衣厂，门口下棋的老人，头顶交织的电线，干净的台阶…… 我们穿过午后的风拐进一条悠长的胡同...</p>
</td>
</tr>
</table>








<div id="sample-6" class="mod">
<div class="pic">
  <img src="http://dummyimage.com/200x100/003dd6/fff">
</div>
<div class="intro">
<div class="title">
<a href="">“青春大金矿”（<北京青年报>专访）</a>
</div>
<p>去见私奔锦的那天，天很平，坐了约一个小时的公车。北京798艺术区附近的居民楼有着老北京的闲散和古旧。初秋的阳光妩媚而有张力，80年代遗留下来的洗衣厂，门口下棋的老人，头顶交织的电线，干净的台阶…… 我们穿过午后的风拐进一条悠长的胡同...</p>
</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"css"}