新闻列表中标题和日期的左右分别对齐的几种处理方法
来源:互联网 发布:lrc歌词编辑软件 编辑:程序博客网 时间:2024/05/22 15:58
新闻列表中标题和日期的左右分别对齐的几种处理方法
前言
在新闻列表中,有标题和日期,然后分别对齐,这种应用场景非常广泛。而在前端实践中,其也有很多中布局方式。很多前端新手在入门时,可能会稍微有点迷茫。
今天我列举几个常用的布局方法,便于新手学习。
这里只是为了实现功能效果,所以不额外添加美化类的样式。只列出核心参数,详细使用时,请根据自己的情况灵活使用。
效果演示
方法一:日期定位法
这种方法是使用定位,将日期设定到right:0;top:0
的位置。
DOM结构
<div class="news_box"> <ul> <li><a href="#">this is a news title 1</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 2</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 3</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 4</a><span>2015-12-15</span></li> </ul></div>
css代码
.news_box {width: 400px;margin: 100px auto;}.news_box li {position: relative;height: 24px;line-height: 24px;overflow: hidden;}.news_box li span {position: absolute;right: 0;top: 0;}
小结
优点:不能说没有,但实在想不起来。
缺点:如果标题文字比较长,会和日期叠在一起。
总之,不推荐使用。
方法二:日期浮动法
这种方法的dom结构和上面的不一样,它把日期给提前了。(上面的方法用这个DOM结构也是可以的。但是,上面的那种DOM结构更加符合HTML语义)。
DOM结构
<div class="news_box"> <ul> <li><span>2015-12-15</span><a href="#">this is a news title 1</a></li> <li><span>2015-12-15</span><a href="#">this is a news title 2</a></li> <li><span>2015-12-15</span><a href="#">this is a news title 3</a></li> <li><span>2015-12-15</span><a href="#">this is a news title 4</a></li> </ul></div>
css代码
.news_box {width: 400px;margin: 100px auto;}.news_box li {height: 24px;line-height: 24px;overflow: hidden;}.news_box li span {float: right;padding-left: 10px;}
小结
优点: 显示效果合理,也便于处理标题过长溢出的问题,隐藏溢出即可。兼容IE6+所有浏览器。
缺点: DOM结构不合理。
这个方法我常用。虽然DOM结构不合理,但是css没有使用任何hack。
方法三:日期浮动法hack版
上面的方法虽然解决了问题,但是毕竟dom结构不是我们希望的。那么,可以不可以在DOM结构为先标题后日期的情况下,实现想要的效果呢?
可以。
DOM结构
<div class="news_box"> <ul> <li><a href="#">this is a news title 1</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 2</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 3</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 4</a><span>2015-12-15</span></li> </ul></div>
css代码
.news_box {width: 400px;margin: 100px auto;}.news_box li {height: 24px;line-height: 24px;overflow: hidden;}.news_box li span {float: right;*margin-top: -24px;}
小结
优点: dom结构正常,兼容性强,hack是为了处理ie6\7,效果优秀。
缺点: 使用了hack。当然,现在不考虑IE6\7的项目,两个浮动法,都是OK的。
方法四:模拟表格法
这种方式完全不推荐。但是,可以作为知识点进行学习,在某些场合,这种方法是很有用的。但是在本帖的例子中,这个方法是不合适的。
DOM结构
<div class="news_box"> <ul> <li><a href="#">this is a news title 1</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 2</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 3</a><span>2015-12-15</span></li> <li><a href="#">this is a news title 4</a><span>2015-12-15</span></li> </ul></div>
css代码
.news_box {width: 400px;margin: 100px auto;}.news_box li {line-height: 24px;display: table;width: 100%;}.news_box li span,.news_box li a {display: table-cell;}.news_box li span {text-align: right;}
小结
优点: 当学新东西咯
缺点: 兼容性差,效果扯淡,不能隐藏标题溢出
总结
浮动法优于定位法优于表格法,至于用不用hack,完全根据项目需要。
1 0
- 新闻列表中标题和日期的左右分别对齐的几种处理方法
- 新闻列表中标题和日期的左右分别对齐的几种处理方法
- 在DIV+CSS排版中新闻列表标题和日期两端对齐
- 中英文字符串截取方法, 适用于新闻列表的标题处理
- LI 标签中让文章标题左对齐,日期右对齐的方法
- LI 标签中让文章标题左对齐,日期右对齐的方法
- 关于iOS中设置UIButton的标题(含图)左右对齐的问题
- SpringMVC日期类型转换问题的几种处理方法
- android中textview的左右对齐
- Fragment实现左右新闻列表和详情
- 只用CSS实现网页常用的列表左右对齐
- Date对象中处理时间和日期的常用方法
- PHP中获取日期的几种方法
- .Net中扫描局域网IP列表的几种方法
- .Net中扫描局域网IP列表的几种方法
- .Net中扫描局域网IP列表的几种方法
- 新闻列表中如何让前几篇标题颜色和其他标题颜色不一样?
- Extjs 中处理日期的方法总结
- 构建兼容浏览器的Angularjs web应用
- 每隔五秒执行一次 共十次 模拟骰子的投掷
- 关于ARM交叉编译工具出现:assertion fail elf32-arm.c:12387 的错误解决办法。
- Openstack Kilo后台命令练习
- iframe 自适应高度
- 新闻列表中标题和日期的左右分别对齐的几种处理方法
- 北京安徽企业商会第一届会长何帮喜同志讲话
- 很特别的一个动态规划入门教程
- AngularJS(03)---Http对象
- oracle的一些常规操作sql语句集
- linux文件缓存相关
- Java中IO流小结
- HDu2212
- Spring的AOP常见错误(顶)