kerryChen95 · May 16, 2013 18:29 · May 3, 2013 · Nov 17, 2012 · Nov 17, 2012 · Nov 17, 2012
diff --git a/dabblet.css b/dabblet.css
@@ -112,13 +112,16 @@ body {
 
 
 /* 
-唯一的缺点兼容性。chrome 21+, firefox 18+, IE 10+ :(。http://caniuse.com/#feat=flexbox
-灵活就是不限定任何值 
+flexible box layout
 */
 #sample-6 {
-  display: -webkit-flex;
+    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; /* 需要固定宽度 */
 }
-#sample-6 .pic {}
-#sample-6 .intro {}
-
 
diff --git a/dabblet.css b/dabblet.css
@@ -112,7 +112,7 @@ body {
 
 
 /* 
-唯一的缺点兼容性。firefox 18+, IE 10+ :(。http://caniuse.com/#feat=flexbox
+唯一的缺点兼容性。chrome 21+, firefox 18+, IE 10+ :(。http://caniuse.com/#feat=flexbox
 灵活就是不限定任何值 
 */
 #sample-6 {

diff --git a/dabblet.css b/dabblet.css
@@ -112,17 +112,13 @@ body {
 
 
 /* 
-唯一的缺点兼容性。大部分高级浏览器都支持(IE10开始支持)，但要加前缀。http://caniuse.com/#feat=flexbox
+唯一的缺点兼容性。firefox 18+, IE 10+ :(。http://caniuse.com/#feat=flexbox
 灵活就是不限定任何值 
 */
 #sample-6 {
   display: -webkit-flex;
-  display: -moz-flex;
-  -moz-flex-direction: row;
 }
 #sample-6 .pic {}
-#sample-6 .intro {
-  -moz-flex: 1;
-}
+#sample-6 .intro {}
 
 
diff --git a/dabblet.css b/dabblet.css
@@ -118,6 +118,7 @@ body {
 #sample-6 {
   display: -webkit-flex;
   display: -moz-flex;
+  -moz-flex-direction: row;
 }
 #sample-6 .pic {}
 #sample-6 .intro {

diff --git a/dabblet.css b/dabblet.css
@@ -116,9 +116,12 @@ body {
 灵活就是不限定任何值 
 */
 #sample-6 {
-  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
 }
 #sample-6 .pic {}
-#sample-6 .intro {}
+#sample-6 .intro {
+  -moz-flex: 1;
+}
 
 
diff --git a/settings.json b/settings.json
@@ -1 +1 @@
-{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"1","page":"css"}
+{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"css"}
diff --git a/dabblet.css b/dabblet.css
@@ -116,10 +116,7 @@ body {
 灵活就是不限定任何值 
 */
 #sample-6 {
-  display:-webkit-flex;
-  display:-moz-flex;
-  display:-ms-flex;
-  display:-o-flex;
+  display: flex;
 }
 #sample-6 .pic {}
 #sample-6 .intro {}

diff --git a/settings.json b/settings.json
@@ -1 +1 @@
-{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"css"}
+{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"1","page":"css"}
diff --git a/dabblet.css b/dabblet.css
@@ -117,6 +117,9 @@ body {
 */
 #sample-6 {
   display:-webkit-flex;
+  display:-moz-flex;
+  display:-ms-flex;
+  display:-o-flex;
 }
 #sample-6 .pic {}
 #sample-6 .intro {}

diff --git a/dabblet.css b/dabblet.css
@@ -113,7 +113,7 @@ body {
 
 /* 
 唯一的缺点兼容性。大部分高级浏览器都支持(IE10开始支持)，但要加前缀。http://caniuse.com/#feat=flexbox
-同时也体现了灵活，不限定任何值 
+灵活就是不限定任何值 
 */
 #sample-6 {
   display:-webkit-flex;

diff --git a/dabblet.css b/dabblet.css
@@ -77,15 +77,48 @@ body {
 
 
 
+#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 {}
+
+
+
+
 
 
 
 
-/* 唯一的缺点兼容性。大部分高级浏览器都支持(IE10开始支持)，但要加前缀。http://caniuse.com/#feat=flexbox */
-#sample-4 {
+/* 
+唯一的缺点兼容性。大部分高级浏览器都支持(IE10开始支持)，但要加前缀。http://caniuse.com/#feat=flexbox
+同时也体现了灵活，不限定任何值 
+*/
+#sample-6 {
   display:-webkit-flex;
 }
-#sample-4 .pic {}
-#sample-4 .intro {}
+#sample-6 .pic {}
+#sample-6 .intro {}
 
 
diff --git a/dabblet.html b/dabblet.html
@@ -37,7 +37,7 @@
 
 <div id="sample-3" class="mod">
 <div class="pic">
-  <img src="http://dummyimage.com/200x200/003dd6/fff">
+  <img src="http://dummyimage.com/200x100/003dd6/fff">
 </div>
 <div class="intro">
 <div class="title">
@@ -53,9 +53,44 @@
 
 
 
+<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>
 
 
-<div id="sample-4" class="mod">
+
+
+
+<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>

diff --git a/settings.json b/settings.json
@@ -1 +1 @@
-{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"all"}
+{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"css"}
diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,91 @@
+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;
+}
+
+
+
+
+
+
+
+
+
+
+/* 唯一的缺点兼容性。大部分高级浏览器都支持(IE10开始支持)，但要加前缀。http://caniuse.com/#feat=flexbox */
+#sample-4 {
+  display:-webkit-flex;
+}
+#sample-4 .pic {}
+#sample-4 .intro {}
+
+
diff --git a/dabblet.html b/dabblet.html
@@ -0,0 +1,68 @@
+<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/200x200/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>
diff --git a/settings.json b/settings.json
@@ -0,0 +1 @@
+{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"all"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"1","page":"css"}
		{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"css"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"","page":"all"}