除了使用表格,一般就用浮动来应用这种布局了。而表格这东西,很多时候都是避而远之的(对Table多少有些不公啊)。
而浮动方法中,我们往往是将右侧对齐项放在结构的前面,然后采用向右浮动,看代码:
但如果我们觉得不习惯右侧的内容反而在结构上靠前的话,我们可以改成向左浮动,但文字靠右对齐
第二种结构下,如果主体内容过长,右侧日期部分会被挤下,并且由于文字是靠右对齐的,主体的换行部分会靠右侧。(在第一种布局中,由于日期部分是浮动元素,不会被挤下。)
所以:
当左侧部分有可能过长而会换行时,推荐使用第一种(即:颠倒结构,右浮动)——应该说这种情况会比较多。
当右侧部分有可能过长而会换行时,推荐第二种(即:左浮动,文字右对齐)
按照以上分类对待后,还有个情况需要处理:为了应付换行带来的视觉影响(特别是第二种方法下),可以对上层(li)设置高度后,overflow:hidden;(刚好,应用了这个之后,可以清除浮动)。
【以上两种方法中虽然的都应用了浮动,但一般情况下,不清除浮动也不会有影响。若要清除,只需在li中定义:overflow:hidden;width:100%;】
至于三列左中右对齐的布局的话,一般是左右结构部分在先,分别左右浮动;中间部分在末,不浮动。