CSS 浮动实例。为了兼容，浮动元素放在所在行的最前面

最新推荐文章于 2021-07-13 08:33:17 发布
最新推荐文章于 2021-07-13 08:33:17 发布
阅读量472 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/78394992
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css">
 .box{ width:500px;margin:0 auto;}
.news{ width:500px; border:1px solid green;}
 .title{ font-size:24px;width:500px;border:1px solid green; height:45px; background:green; line-height:45px; }
 .title span{float:right;font-size:16px;}    /* float:right; "more>>"浮动右边 */
 .news ul li{ height:30px; line-height:30px; border-bottom:1px dashed #ccc; width:420px;}
 .news li a:link,.news li a:visited{color:#ccc; text-decoration:none;}
 .news li a:hover{ color:red; text-decoration:none;}
 .time{ float:right;}      /* float:right; "2015/11/7"浮动右边 */
  </style>
 </head>

 <body>
 <div class="box">
<div class="title"><span>more>></span>新闻中心</div>  <!--为了兼容不同浏览器，需要将浮动的元素放到所在行的最前面。否则ie6中，浮动元素会被同一行兄弟元素挤到下边一行-->
<div style="clear:both;"></div>
<div class="news">
<ul>
<li><span class="time">2015/11/7</span><a href="#">长春供暖:以为谁家着火了</a></li>
<li><span class="time">2015/11/7</span><a href="#">广州去年2入未说明</a></li>
<li><span class="time">2015/11/7</span><a href="#">广州去年他收入未说明</a></li>
<li><span class="time">2015/11/7</span><a href="#">年内5次贷可省17万</a></li>
<li><span class="time">2015/11/7</span><a href="#">台湾太平占岛礁</a></li>
<li><span class="time">2015/11/7</span><a href="#">解放军部队自研软件</a></li>
<li><span class="time">2015/11/7</span><a href="#">其他收入未说明</a></li>
</ul>
  </div>
  </div>
 </body>
</html>

houyanhua1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 浮动在最上层_css样式如何控制div到最顶层
weixin_34530398的博客
12-23 9971
展开全部1、新建一个html文件，命名为test.html2、在test.html文件内，使用css设置页面所有的div宽度为300px，高度为300px，div的位置为绝对定位。e68a8432313133353236313431303231363533313334313663343、在test.html文件内，创建三个div，并用文字标识，分别为底层div、中层div、最顶层div。4、在te...
使div标签中的内容浮动在最上层
Up was the only direction your compass navigate.
09-10 1万+
问题描述：   在做模糊查询弹出框的时候，显示词语的弹出框一直在别的控件的下面，导致里面的内容选取不上。      解决方法：   在div中，设置style中的z-index:auto。   auto可以定义为一个整数数字，越大代表位置越靠前，可以定义为z-index：99999。如果定义为-1，会显示在最底层。   如果被一些flash文件挡住，需要
让一个div层浮在最上层
热门推荐
w592376568的博客
04-17 7万+
    1、需求：做一个input框，支持手动输入的同时，还支持下拉框；        所以要求这个下拉框要浮在最上层，如图：要点：如果div较少，如两个div，则可以直接用：style="position: absolute;"而我这里的div较多，且要将下拉框浮在弹框之上，（弹框中有多个div，要将下拉框浮在这些div之上），则需要加入z-index属性；style="position: ab...
css 缩放_《CSS 知识总结》
weixin_39960319的博客
11-25 405
css又称层叠样式表，其中css2.1最为广泛，css3之后便是分模块升级。首先在加入css样式时用border调试法，加入边框便可清楚发生什么变化，方便我们继续写代码。1、css的文档流行内元素：inline ，宽度由内容决定，高度由line-height间接决定。行内块元素：inline-block，整个元素是个整体，不会分开，宽度由内容和内联元素总和决定，高度由文档流元素总和决定。块级元素：...
CSS使用float属性设置浮动元素的实例教程
09-24
主要介绍了CSS使用float属性设置浮动元素的实例教程,包括使用overflow清除浮动的方法,需要的朋友可以参考下
css如何让浮动元素水平居中
09-03
css中对于定宽的非浮动元素用margin:0 auto进行水平居中，对于不定宽的浮动元素也有一个常用技巧，这篇文章就给大家介绍下css如何让浮动元素水平居中，需要的朋友可以来学习下
CSS 同级元素浮动分析小结
09-22
主要介绍了CSS 同级元素浮动分析小结的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
DIV+CSS垂直居中一个浮动元素
09-25
对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。
CSS清除浮动使父级元素展开的三个方法
09-25
一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面举个例子为大家详细介绍下，希望对大家有所帮助
让一个div浮在最上层解决方法
weixin_30478757的博客
01-25 1762
设置 style中 z-index:auto auto可定义为一个值(整数数字)，越大代表越置前，如可定义为：z-index:9999。 若定义为-1，代表为最底层。 另： 若是会被一些FLASH文件给遮住， 可将flash对象的参数wmode设置为transparent即可 转载于:https://www.cnblogs.com/wannianma/p/3533056....
CSS让div层悬浮在最上方
夜色微凉
06-24 6万+
效果如下： 这里是使得一张div里面的图片悬浮在了地图的上方，css代码如下 .tl { width: 240px; height: 193px; position: absolute;/*这里一定要设置*/ z-index: 999999;/*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/ margin-top: 20%; mar
关于float浮动的块级元素在编写html时先后顺序对布局的影响
曾大大的博客
03-24 5976
闲来没事，在做2016年百度前端技术学院，任务三：三栏式布局 看了下任务需求： 感觉 so easy，于是立马动手写了！ html部分 css部分 结果一看： 刚看到这个结果时感觉脸都绿了，然后调出css仔细看哪里写错了： 找了半天也没看出css哪里写的不对，之后我又看了下学院里面其他同学
html div浮动最前面,CSS-浮动布局
weixin_34086545的博客
07-13 417
《CSS-浮动布局》由会员分享，可在线阅读，更多相关《CSS-浮动布局(74页珍藏版)》请在人人文库网上搜索。1、浮动布局浮动布局 本章内容本章内容 固定宽度网页布局固定宽度网页布局一一 实现网页布局的三种方式实现网页布局的三种方式 二二 浮动的概念浮动的概念 三三 两列浮动布局两列浮动布局 四四 三列浮动布局三列浮动布局 五五 让背景延伸让背景延伸 六六 固定宽度网页布局固定宽度网页布局一一 7...
设置浮动无法浮动到上一个div的上面
weixin_45766506的博客
06-11 1602
今天又踩了一个坑，是我忘记了float样式的原本的效果了【哭】。 来看下代码： html代码： <body> <div class="box1"></div> <div class="box2">设置浮动只会影响后面元素的布局</div> <div class="box3"></div> </body> css代码： .box1{ width: 2
设置堆叠顺序,使某个元素处于最上层堆叠-即漂浮在最上面
大雷
07-19 2189
#设置堆叠顺序(拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面) z-index: 9999; eg:style="z-index: 9999;" #把元素放置到一个固定的位置中。 position: fixed;...
学习笔记----float后不与前面元素同行解决办法。
weixin_33966095的博客
08-26 522
<li>文本<span> 16-08-17</span></li> 当非float的元素和float的元素在一起的时候（如上代码）， 如果非float元素在先，那么float的元素将被排斥 也就是说，你的span是float:right，但是你文本还是float:none 如果要让两者占据同一行:要么你把span先于文本显示（如...
css浮动和普通的元素区别
最新发布
07-09
CSS中的浮动元素和普通元素之间有一些区别。 1. 定位：浮动元素通过设置`float`属性来脱离正常的文档流，并且可以进行左浮动（`float: left`）或右浮动（`float: right`）。普通元素默认是在文档流中按照其出现的顺序进行排列。 2. 排列：浮动元素会尽量靠近其前一个浮动元素或文本内容，并且后续的内容会环绕在其周围。普通元素则按照其在文档流中的位置进行排列。 3. 父元素的高度：当父元素包含浮动元素时，其高度不会自动根据浮动元素的高度而调整，可能导致父元素高度塌陷。普通元素会被作为布局的一部分，父元素的高度会根据其内容和子元素的高度自动调整。 4. 清除浮动：由于浮动元素会脱离正常文档流，可能导致后续元素受到影响。为了解决这个问题，可以使用清除浮动的技术，例如在父元素的末尾添加`clear: both`样式或使用clearfix技巧。普通元素不需要清除浮动。 总的来说，浮动元素用于实现元素的横向排列、图文混排等效果，而普通元素则按照其在文档流中的位置进行排列和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值