html仿今日头条数据列表

例子代码下载：http://download.csdn.net/detail/friendan/9503019

效果截图：

收获如下：
1、使用Respond.js解决了Bootstrap3栅格系统不兼容IE8的问题。
2、知道了如何让两个div盒子完美的左右相邻。
------------------------------------------------------------------
碰到的问题：
1、两个div盒子都左浮动float:left后，虽然能够达到左右相邻的效果，
但是当右边div盒子的内容长度过长时，右边的div盒子会自动换行，
导致了两个div不能够左右相邻显示。我尝试过使用overflow: hidden;
然而并不能解决该问题。。。

解决方法：
只浮动一个div盒子即可，如左边的div设置float:left;右边div不浮动，设置其margin-left: 160px;即可。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------

最后贴下html代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><meta name="renderer" content="webkit"><title>仿今日头条列表</title><link rel="stylesheet" href=".\css\bootstrap-3.3.5-dist\css\bootstrap.min.css"><!-- bootstrap3栅格系统不支持IE8。 但是可以用以下方法解决。 --><!-- 测试respond.js时需要启动web服务器，然后在浏览中浏览才能看到效果，直接使用浏览器打开xxx.html文件是看不到效果的！ --><!-- 需要启动本地服务器（localhost），不能使用普通本地的url地址（file://xxx.html）--><!-- 参考文章：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201410745621487/ --><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="./js/html5shiv-3.7.3/dist/html5shiv.min.js"></script><script src="./js/Respond-1.4.2/dest/respond.min.js"></script><![endif]--></head><style type="text/css">p{margin: 0;padding: 0;}.data-item{border: 0;border-bottom: 1px solid #f5f6f7;/*border-bottom: 1px solid #000; */margin-top: 5px;}.data-group-text .data-group-text-title a{font-size: 18px;font-weight: bold;color: #222;margin-top: 0;}.data-group-img img{display: inline-block;width: 126px;height: 82px;margin-top: 5px;}.data-group-img + .data-group-text{  /* 加号+用于选择兄弟元素 */margin-left: 140px;}.data-group-text-footer-right a{color: #999;margin-left: 5px;}.data-group-text-footer-left span{color: #999;font-size: 10px;}</style><body><div class="container"><div class="row"><!--S 左边内容--><div class="col-md-2"><p>左边</p><a href="http://toutiao.com/" target="_blank">访问今日头条首页</a></div><!--E 左边内容--><!--S 中间列表内容--><div class="col-md-8"><ul class="list-group"><li class="list-group-item data-item"><div class="data-group"><div class="data-group-text"><div class="data-group-text-title"><a href="#">梅兰芳儿子京剧大师梅葆玖去世 享年82岁</a></div><div class="data-group-text-content"><p>京剧大师梅葆玖上午病逝，享年82岁。梅葆玖3月31日因突发支气管痉挛，导致脑缺氧送医院抢救。梅葆玖是1934年出生在上海，是梅兰芳的第九个孩子。梅葆玖也是梅派艺术的传人，目前是北京京剧院梅兰芳京剧团的团长， 他的代表作品有《霸王别姬》...</p></div><div class="data-group-text-footer"><div class="data-group-text-footer-left pull-left"><span>手机央广网．</span><span>314评论</span><span>．20分钟前</span></div><div class="data-group-text-footer-right pull-right"><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-share-alt" aria-hidden="true"></span></a></div><div class="clearfix"></div></div></div></div></li><li class="list-group-item data-item"><div class="data-group"><div class="data-group-img pull-left"><img src="./img/baby.jpg" /></div><div class="data-group-text"><div class="data-group-text-title"><a href="#">南宁一幼儿园1周内确诊10起手足口病例，竟是因为园方...</a></div><div class="data-group-text-content"><p>121周内确诊10起手足口病例幼儿园停课整顿10天4月12日，南宁明秀东路上某幼儿园一班上有一名学生在校时高烧，回家后被确诊为手足口病。当时该学生家长及时通知园方...</p></div><div class="data-group-text-footer"><div class="data-group-text-footer-left pull-left"><span>南国早报．</span><span>1评论</span><span>．1小时前</span></div><div class="data-group-text-footer-right pull-right"><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a><a href="#"><span class="glyphicon glyphicon glyphicon-share-alt" aria-hidden="true"></span></a></div><div class="clearfix"></div></div></div></div></li><li class="list-group-item data-item">item</li><li class="list-group-item data-item">item</li><li class="list-group-item data-item">item</li></ul></div><!--E 中间列表内容--><!--S 右边内容--><div class="col-md-2">右边</div><!--E 右边内容--></div></div></body>
</html>

html仿今日头条数据列表相关推荐

高仿今日头条视频列表功能
开源地址:https://github.com/open-android/JieCaoVideoPlayer 主要特点视频全屏播放和浮层小窗播放可以完全自定义UI 能在ListView.ViewP ...
android自定义视频列表,Github最火开源项目-高仿今日头条视频列表功能
主要特点视频全屏播放和浮层小窗播放可以完全自定义UI 能在ListView.ViewPager和ListView.ViewPager和Fragment等多重嵌套模式下全屏工作手势修改进度和音量视 ...
html仿今日头条下拉刷新,小程序仿今日头条带滑动切换的文章列表
小程序仿今日头条带滑动切换的文章列表发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）
前言上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...
微信小程序-仿今日头条客户端
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
android 横向滚动导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
uni-app仿今日头条滚动tab导航
uni-app仿今日头条滚动tab导航,如下图: dom结构: <scroll-view scroll-x class="scroll-row& ...
[Android] Android 手机下仿今日头条新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意开发了这个仿今日头条新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻预览演示如下: 功能说明: 1)底部 ...
仿今日头条视频播放JieCaoVideoPlayer
原文地址:http://blog.csdn.net/w_l_s/article/details/53132179 JieCaoVideoPlayer一个真正实现Android的全屏功能,立志成为And ...

html仿今日头条数据列表

html仿今日头条数据列表相关推荐

最新文章

热门文章