三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

简单的左右对齐的列表布局
作者:Neoxone    发表时间: 2008年12月30号,星期二     阅读:4,884 次

除了使用表格,一般就用浮动来应用这种布局了。而表格这东西,很多时候都是避而远之的(对Table多少有些不公啊)。

而浮动方法中,我们往往是将右侧对齐项放在结构的前面,然后采用向右浮动,看代码:

但如果我们觉得不习惯右侧的内容反而在结构上靠前的话,我们可以改成向左浮动,但文字靠右对齐

第二种结构下,如果主体内容过长,右侧日期部分会被挤下,并且由于文字是靠右对齐的,主体的换行部分会靠右侧。(在第一种布局中,由于日期部分是浮动元素,不会被挤下。)
所以:
当左侧部分有可能过长而会换行时,推荐使用第一种(即:颠倒结构,右浮动)——应该说这种情况会比较多。
当右侧部分有可能过长而会换行时,推荐第二种(即:左浮动,文字右对齐)

按照以上分类对待后,还有个情况需要处理:为了应付换行带来的视觉影响(特别是第二种方法下),可以对上层(li)设置高度后,overflow:hidden;(刚好,应用了这个之后,可以清除浮动)。

【以上两种方法中虽然的都应用了浮动,但一般情况下,不清除浮动也不会有影响。若要清除,只需在li中定义:overflow:hidden;width:100%;】

至于三列左中右对齐的布局的话,一般是左右结构部分在先,分别左右浮动;中间部分在末,不浮动。

标签: ,

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(