如下图所示文章列表

列表宽220px，单行高度20px；
日期紧随标题之后，距离标题10px；
标题过长时，隐藏标题，但日期必须显示完整；

方案

html

<ul class="list">
	<li><a href="#">前端工程师应该如何学习JS</a> <span class="date">2010-07-31</span></li>
	<li><a href="#">前端工程师的知识收集与管理</a> <span class="date">2010-06-26</span></li>
	<li><a href="#">分享你在开发中的经验</a> <span class="date">2010-05-29</span></li>
	<li><a href="#">前端开发团队现状调查和未来期望</a> <span class="date">2010-04-24</span></li>
	<li><a href="#">前端开发在研发流程中与其他岗位协作效率的提升</a> <span class="date">2010-03-27</span></li>
	<li><a href="#">页面重构合理化讨论</a> <span class="date">2010-01-30</span></li>
	<li><a href="#">页面重构合理化讨论</a> <span class="date">2009-12-26</span></li>
	<li><a href="#">css sprites应用</a> <span class="date">2009-11-28</span></li>
	<li><a href="#">网站重构中的文件组织</a> <span class="date">2009-10-31</span></li>
</ul>

css

.list {
	list-style: none;
	width: 220px;
	margin: 0;
	padding: 0;
	font: 12px/20px Arial;
}
.list li {
	height: 20px;
	overflow: hidden;
}
.list a {
	float: left;
	padding-right: 64px;
	color: #000;
	text-decoration: none;
}
.list a:hover {
	text-decoration: underline;
}
.list .date {
	float: left;
	margin-left: -54px;
	color: #ACACAC;
	font-size: 10px;
}

查看demo

分析

标题过长时，隐藏标题，那么这里必定要用到overflow:hidden（内容溢出隐藏）。

上面html结构中的a元素（标题）与span元素（日期）都是inline元素，默认样式下是垂直相邻排列的，在列表宽度固定的情况下，如果标题过长则日期会紧随其后而转行，这个时候在li元素高度固定为20px且定义了overflow:hidden时，转行的文本将会被隐藏。但这里需要的只是隐藏标题（a元素）的内容而日期（span元素）始终完整显示。怎样才能让span元素紧随a元素之后又不因a元素内容过长而转行呢？我想到的是让span的元素框与a的元素框重叠，因为span里的日期格式是固定的，那么其宽度也就确定了，所以为a定义一个padding-right值，再为span定义一个同等的margin-left负值，这样span元素就始终重叠于a元素的padding-right区域之上，也就不会受a元素内容的影响而转行了。当然这么做之前需要让a和span都浮动，因为它们默认都是inline元素，在没浮动时span元素还是会和a元素中转行的文本处于同一行框之中。

OK，我就是这么做的。不足之处欢迎指正，如果你想到更好的方法别忘了和大家分享哈 ~ :)

两列布局，左栏宽度固定为200px，右栏宽度自适应且优先载入；
两列间距为10px；
两列高度不确定。

方案

html

<div id="content">
	<div id="main">主栏</div>
	<div id="sidebar">侧栏</div>
</div>

css

#content {
	padding-left: 210px;
}
#main {
	float: right;
	width: 100%;
}
#sidebar {
	display: inline; /* IE6 Bug */
	float: left;
	width: 200px;
	margin-left: -210px;
}

查看demo

分析

主栏需要优先载入，那么在html中两块内容的顺序就确定了，main要放置于sidebar前面。

两块内容并列放置，通常会用float或absolute来实现，用absolute实现很方便，需要固定宽度的侧栏absolute，主栏写一个margin-left就OK。但这个需求中有一个“两列高度不确定”，也就是有可能sidebar比main更高，那么如果sidebar定义了absolute，就会脱离普通文档流，它的内容变动时就无法影响到后面元素的位置，还可能会覆盖到后面的元素上。因为这个需求的存在，这里就不能用absolute的方式了。

如果用float呢？元素浮动后其宽度会自动收缩到最小，那么main浮动后,需要使其宽度自适应就只能依赖于父元素了，所以这里添加一个额外的div（#content），定义了一个padding-left以确定main的宽度范围，接下来定义sidebar的margin-left为负值让其与main并列显示。