优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

css中清除浮动的例子

时间:2016-11-21 00:00:00 编辑:简简单单 来源:转载

左图右文形式,这是手机页面经常碰到的一种情况,记得第一次写的时候,好纠结,因为不会,排版的时候,老是写不出和效果图一样的效果,最近发现,原来是使用了float元素,导致这个页面最外层的标签撑不起来(手机页面一般不将宽度和高度定死),这个时候,突然想起可以清除浮动  clear:both;

下面放出代码

css:

.cell-content {display: block;margin-bottom: 10px;background: #eee;}
.cell-content:hover,.cell-footer ul li a:hover {color: red}
.cell-content img {width: 20%;float: left;padding: 3% 3% 0 3%;}
.cell-title {width: 71%;padding-top: 4%;font-size: 16px;cursor: pointer;}
.ellipsis {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.more-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.cell-content-del {float: right; margin-right: 3%;width: 71%;margin-top: 2%;font-size: 14px;color: #333;line-height: 1.5;}
.clh {padding-bottom: 3%;clear: both;}

html:

javascript:;" class="cell-content">
 css中清除浮动的例子
 

浙江衢州橘子浙江衢州橘子浙江衢州橘子浙江衢州橘子浙江衢州橘子


 浙江味美味美味美味美味美味美味美味美味美味美味美味美味美味美味味美味美味州橘子
 


 
在使用float的标签下方,添加一个标签,清除之前浮动的影响(最外层标标签无法撑开)

文章评论

热门栏目

XML 地图 | Sitemap 地图