1、概述文字列表大多使用在新闻资讯板块中,为了适应屏幕宽度,可以使用百分比布局和固定尺寸布局配合。新闻左侧的分类标签和右侧的发布时间是固定的,新闻标题部分是不固定宽度的。如下图所示:2、代码示例:<!DOCTYPE html><html lang="z ...
1、概述
文字列表大多使用在新闻资讯板块中,为了适应屏幕宽度,可以使用百分比布局和固定尺寸布局配合。新闻左侧的分类标签和右侧的发布时间是固定的,新闻标题部分是不固定宽度的。
如下图所示:
2、代码示例:
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="author" content="Tencent-TGideas" /> <meta name="Copyright" content="Tencent" /> <title>实例-文字列表</title> <style> body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, input, select, textarea, div, table, td, th, tr, dt, dd, dl { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } nav { display: block; } ul, ol { list-style: none; } em, i { font-style: normal; } table { border-spacing: 0; border-collapse: collapse; } img { border: 0; vertical-align: middle; -webkit-touch-callout: none; } input, select { display: inline-block; vertical-align: middle; font-size: 100%; font-family: "\5FAE\8F6F\96C5\9ED1"; line-height: 150%; } a { color: #000; text-decoration: none; outline: none; hide-focus: expression(this.hideFocus=true); background-color: transparent; -webkit-tap-highlight-color: transparent; } a:hover { color: #000; } dl, dt, dd, div { outline: none; } .none { display: none; } .hide { visibility: hidden; } .visb { visibility: visible; } .pa { position: absolute; } .bk { display: block; } html, body { overflow-x: hidden; } body { min-width: 320px; font: 14px/1.5 "\5FAE\8F6F\96C5\9ED1", arial; color: #000; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; cursor: default; } body>object p { display: none; } .wrapper { width: 100%; text-align: center; padding: 5% 0; } .container { width: 100%; max-width: 1000px; position: relative; margin: 0 auto; text-align: left; } .article { position: relative; width: 100%; } h1 { text-align: center; font-size: 16px; } /* 新闻 */ .hotnews { width: 100%; height: 300px; position: relative; background: #fff; overflow: hidden; } .newsbox { padding: 15px 20px 0; position: relative; overflow: hidden; } .listpart { position: relative; border-top: 1px solid #e4eae9; width: 100%; height: 222px; overflow: hidden; z-index: 1; } .listbox { width: 100%; position: absolute; top: 18px; left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } .newslists { float: left; width: 100%; *zoom: 1; font-size: 13px; } .newslists .nl-i { position: relative; margin: 0 5px; *float: left; *zoom: 1; *width: 395px; } .newslists .cltag { position: absolute; /*重要 --实现垂直居中*/ top: 50%; left: 0; line-height: 100%; /*重要 --实现垂直居中*/ margin-top: -7px; color: #767676; z-index: 5; } .newslists .cltag:hover i { cursor: pointer; text-decoration: underline; } .newslists .cltit { position: relative; display: block; padding: 3px 50px 3px 0; margin-left: 40px; color: #505050; *width: 265px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 2; } .newslists .cltit:hover { color: #2FC3A2; } .newslists .cltime { position: absolute; /*重要 --实现垂直居中*/ top: 50%; right: 0; line-height: 100%; /*重要 --实现垂直居中*/ margin-top: -6px; text-align: right; z-index: 1; color: #b1b1b1; overflow: hidden; white-space: nowrap; } @media screen and (max-width:460px) { .hotnews { height: auto; } .newsbox { padding: 3%; } } </style> </head> <body> <div > <div > <h1>文字列表</h1> <div > <div > <div > <div id="newslist"> <ul > <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> <li > <a >[<i>头条</i>]</a> <a >这里是新闻文字/这里是新闻文字/这里是新闻文字/这里是新闻文字</a><span >11/29</span></li> </ul> </div> </div> </div> </div> </div> </div> </body></html>
说明:新闻列表(包括分类标签、新闻标题和发布时间)需要在本行垂直居中,需要使用绝对定位进行控制,详见代码注释。
原标题:文字列表布局
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。