tpeng · May 13, 2012 12:16
diff --git a/dabblet.css b/dabblet.css
 /**
 * The first commented line is your dabblet’s title
 */
 a { color: #00c; text-decoration: none; }
 a:visited { color: #00c; }
 a:hover { text-decoration: underline; }

 .clear {clear:both;}

 #content {
    float: left;
    width: 75%;
 }

 .hl {
    font-family: Helvetica, Arial, sans-serif;
    border: 1px solid #ddd;
    /* border-bottom-width: 0; */
    padding: 10px;
    margin: 20px;
    border-style: solid;
    background-color: #f8f8f8;
 }

 #load-more {
    background-color: #eee;
    color:#999;
    font-weight:bold;
    text-align:center;
    padding:10px;
    margin: 20px;
    cursor:pointer;
 }

 #load-more:hover {
    color:#666;
 }

 .hl .avatar {
    float: left;
    padding-top: 3px;
 }

 .hl .name {
    float: left;
    /* width: 128px;*/
    text-align: left;
    margin: 10px;
    font-weight: bold;
 }

 .hl .action {
    float: left;
    width: 64px;
    margin: 10px;
 }

 .hl .publish-at {
    float: right;
    width: 128px;
    margin: 10px;
 }

 .hl .comment {
  	width: 80%;
    margin-left: 74px;
    text-align: left;
    overflow: hidden;
    word-wrap: break-word;
    top: -30px;
    position: relative;
 }

 .hl .content {
    width: 80%;
    margin-left: 74px;
    text-align: left;
    overflow: hidden;
    word-wrap: break-word;
    top: -30px;
    position: relative;
 }

 .hl .quote-content {
    width: 80%;
    margin-left: 74px;
    text-align: left;
    /*font-style: italic;*/
    overflow: hidden;
    word-wrap: break-word;
    top: -20px;
    position: relative;
 }

 .hl .source {
    float: left;
    width: 80%;
    margin-left: 74px;
    text-align: left;
 }

 #sidebar {
    float: right;
    width: 20%;
    margin: 20px;
 }

 #btn2{
    text-align:center;
    font-size:30px;
    color:#333;
    display:block;
    width:100%;
    height:60px;
    line-height:60px;
    margin:0 auto;
    text-decoration:none;
    letter-spacing: -3px;
    box-shadow:1px 1px 5px #333;
    border-radius:5px;
    background-image: -webkit-linear-gradient(top,#fff,#ddd);
    background-image: -moz-linear-gradient(top,#fff,#ddd);
    background-image: -ms-linear-gradient(top,#fff,#ddd);
    background-image: -o-linear-gradient(top,#fff,#ddd);
    background-image: linear-gradient(top,#fff,#ddd);
    display:inline-block;
 }

 #sidebar ul {
    list-style: none;
    padding-left: 10px;
    border: 1px solid #ddd;
 }

 #sidebar ul li {
    padding: 2px;
 }

 body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 100%;
    margin: 0px auto 0px auto;
    width: 60%;
    background-color: #f4f4f4;
    position: relative;
 }

diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div id="content">
 	 <div class="hl">
 	   <div class="avatar">
 	     <img height="64" width="64" src="http://api.freebase.com/api/trans/image_thumb/en/avatar_2009?maxwidth=32&maxheight=32&mode=fillcrop">
 	   </div>
 	   <div class="name">特瑞tpeng</div>
 	   <div class="action">赞了</div>
 	   <div class="publish-at">3个小时前</div>
 	   <div class="clear"></div>
 	   <div class="content"><a href="/api/article/getBody?url=http://www.36kr.com/p/106718.html">过了9月，MobileMe用户要么通过购买获得额外空间，要么使用苹果提供的5GB免费方案</a></div>
 	   <div class="source">来自：亚马孙和巴诺</div>
 	   <div class="clear"></div>
 	 </div>

 	<div class="hl">
 	   <div class="avatar">
 	     <img height="64" width="64" src="http://api.freebase.com/api/trans/image_thumb/en/avatar_2009?maxwidth=32&maxheight=32&mode=fillcrop">
 	   </div>
 	   <div class="name">特瑞tpeng</div>
 	   <div class="action">赞了</div>
 	   <div class="clear"></div>
 	   <div class="comment">Yet another comment test</div>
 	   <div class="quote-content">
 	     <!--<blockquote>-->
 	       <a href="/api/article/getBody?url=http://www.36kr.com/p/106718.html">相对于用table的方法的好处是不用增加无语义标签，简化标签嵌套深度。这个思路是这样的，通过改变块级元素的display属性值为inline类型，然后设置text-align:center来实现居中。这种方法也有一定不妥之处就是把块级元素改为行内元素后，行内元素比块元素少了一些功能。比如说设定长宽值等，在项目运用中可能会有一些限制，大家可以自行选择</a>
 	     <!--</blockquote>-->
 	   </div>
 	   <div class="source">来自：亚马孙和巴诺</div>
 	   <div class="clear"></div>
 	</div>
 	<div id="load-more">load more</div>
 </div>

 <div id="sidebar">
  <a id="btn2" href="javascript:(function(){var s = document.createElement(\'script\');s.setAttribute(\'type\',\'text/javascript\');s.setAttribute(\'src\',\'http://zythum.free.bg/youkuhtml5playerbookmark/youkuhtml5playerbookmark.js\');document.head.appendChild(s);})();">添加到达观</a>
  <ul class="columnList">
    <li>
      <a target="_blank" href="/?column_id=4f9c0ef3a09464038569168f"></a>
      <img title="新浪科技" src="http://tp1.sinaimg.cn/1642634100/50/5613120647/0">
      <a target="_blank" href="/?column_id=4f9c0ef3a09464038569168f">新浪科技</a>
    </li/>
    <li>
      <a target="_blank" href="/?column_id=4f9ebf9d003c640307c8e547"></a>
      <img title="36氪" src="http://tp4.sinaimg.cn/1750070171/50/5627443866/1">
      <a target="_blank" href="/?column_id=4f9ebf9d003c640307c8e547">36氪</a>
    </li>
  </ul>
 </div>

 <clear>

diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
	/**
	* The first commented line is your dabblet’s title
	*/
	a { color: #00c; text-decoration: none; }
	a:visited { color: #00c; }
	a:hover { text-decoration: underline; }

	.clear {clear:both;}

	#content {
	float: left;
	width: 75%;
	}

	.hl {
	font-family: Helvetica, Arial, sans-serif;
	border: 1px solid #ddd;
	/* border-bottom-width: 0; */
	padding: 10px;
	margin: 20px;
	border-style: solid;
	background-color: #f8f8f8;
	}

	#load-more {
	background-color: #eee;
	color:#999;
	font-weight:bold;
	text-align:center;
	padding:10px;
	margin: 20px;
	cursor:pointer;
	}

	#load-more:hover {
	color:#666;
	}

	.hl .avatar {
	float: left;
	padding-top: 3px;
	}

	.hl .name {
	float: left;
	/* width: 128px;*/
	text-align: left;
	margin: 10px;
	font-weight: bold;
	}

	.hl .action {
	float: left;
	width: 64px;
	margin: 10px;
	}

	.hl .publish-at {
	float: right;
	width: 128px;
	margin: 10px;
	}

	.hl .comment {
	width: 80%;
	margin-left: 74px;
	text-align: left;
	overflow: hidden;
	word-wrap: break-word;
	top: -30px;
	position: relative;
	}

	.hl .content {
	width: 80%;
	margin-left: 74px;
	text-align: left;
	overflow: hidden;
	word-wrap: break-word;
	top: -30px;
	position: relative;
	}

	.hl .quote-content {
	width: 80%;
	margin-left: 74px;
	text-align: left;
	/font-style: italic;/
	overflow: hidden;
	word-wrap: break-word;
	top: -20px;
	position: relative;
	}

	.hl .source {
	float: left;
	width: 80%;
	margin-left: 74px;
	text-align: left;
	}

	#sidebar {
	float: right;
	width: 20%;
	margin: 20px;
	}

	#btn2{
	text-align:center;
	font-size:30px;
	color:#333;
	display:block;
	width:100%;
	height:60px;
	line-height:60px;
	margin:0 auto;
	text-decoration:none;
	letter-spacing: -3px;
	box-shadow:1px 1px 5px #333;
	border-radius:5px;
	background-image: -webkit-linear-gradient(top,#fff,#ddd);
	background-image: -moz-linear-gradient(top,#fff,#ddd);
	background-image: -ms-linear-gradient(top,#fff,#ddd);
	background-image: -o-linear-gradient(top,#fff,#ddd);
	background-image: linear-gradient(top,#fff,#ddd);
	display:inline-block;
	}

	#sidebar ul {
	list-style: none;
	padding-left: 10px;
	border: 1px solid #ddd;
	}

	#sidebar ul li {
	padding: 2px;
	}

	body {
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-size: 100%;
	margin: 0px auto 0px auto;
	width: 60%;
	background-color: #f4f4f4;
	position: relative;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="content">
	<div class="hl">
	<div class="avatar">
	<img height="64" width="64" src="http://api.freebase.com/api/trans/image_thumb/en/avatar_2009?maxwidth=32&maxheight=32&mode=fillcrop">
	</div>
	<div class="name">特瑞tpeng</div>
	<div class="action">赞了</div>
	<div class="publish-at">3个小时前</div>
	<div class="clear"></div>
	<div class="content"><a href="/api/article/getBody?url=http://www.36kr.com/p/106718.html">过了9月，MobileMe用户要么通过购买获得额外空间，要么使用苹果提供的5GB免费方案</a></div>
	<div class="source">来自：亚马孙和巴诺</div>
	<div class="clear"></div>
	</div>

	<div class="hl">
	<div class="avatar">
	<img height="64" width="64" src="http://api.freebase.com/api/trans/image_thumb/en/avatar_2009?maxwidth=32&maxheight=32&mode=fillcrop">
	</div>
	<div class="name">特瑞tpeng</div>
	<div class="action">赞了</div>
	<div class="clear"></div>
	<div class="comment">Yet another comment test</div>
	<div class="quote-content">
	<!--<blockquote>-->
	<a href="/api/article/getBody?url=http://www.36kr.com/p/106718.html">相对于用table的方法的好处是不用增加无语义标签，简化标签嵌套深度。这个思路是这样的，通过改变块级元素的display属性值为inline类型，然后设置text-align:center来实现居中。这种方法也有一定不妥之处就是把块级元素改为行内元素后，行内元素比块元素少了一些功能。比如说设定长宽值等，在项目运用中可能会有一些限制，大家可以自行选择</a>
	<!--</blockquote>-->
	</div>
	<div class="source">来自：亚马孙和巴诺</div>
	<div class="clear"></div>
	</div>
	<div id="load-more">load more</div>
	</div>

	<div id="sidebar">
	<a id="btn2" href="javascript:(function(){var s = document.createElement(\'script\');s.setAttribute(\'type\',\'text/javascript\');s.setAttribute(\'src\',\'http://zythum.free.bg/youkuhtml5playerbookmark/youkuhtml5playerbookmark.js\');document.head.appendChild(s);})();">添加到达观</a>
	<ul class="columnList">
	<li>
	<a target="_blank" href="/?column_id=4f9c0ef3a09464038569168f"></a>
	<img title="新浪科技" src="http://tp1.sinaimg.cn/1642634100/50/5613120647/0">
	<a target="_blank" href="/?column_id=4f9c0ef3a09464038569168f">新浪科技</a>
	</li/>
	<li>
	<a target="_blank" href="/?column_id=4f9ebf9d003c640307c8e547"></a>
	<img title="36氪" src="http://tp4.sinaimg.cn/1750070171/50/5627443866/1">
	<a target="_blank" href="/?column_id=4f9ebf9d003c640307c8e547">36氪</a>
	</li>
	</ul>
	</div>

	<clear>