元素 float:right 后右对齐换行原因

前端之家收集整理的这篇文章主要介绍了元素 float:right 后右对齐换行原因前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<div class="cnblogs_code" onclick="cnblogs_code_show('6c6174fc-4120-46d4-a886-9ca4cfff05df')">
<img style="display: none" id="code_img_closed_6c6174fc-4120-46d4-a886-9ca4cfff05df" class="code_img_closed" alt="" src="/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img id="code_img_opened_6c6174fc-4120-46d4-a886-9ca4cfff05df" class="code_img_opened" onclick="cnblogs_code_hide('6c6174fc-4120-46d4-a886-9ca4cfff05df',event)" src="/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码@H_301_0@
<div id="cnblogs_code_open_6c6174fc-4120-46d4-a886-9ca4cfff05df">

301_0@301_0@301_0@301_0@@H_301_0@301_0@301_0@301_0@301_0@301_0@@H_301_0@301_0@301_0@301_0@<@H_301_0@301_0@301_0@301_0@301_0@301_0@301_0@301_0@@H_301_0@301_0@301_0@301_0@301_0@301_0@<@H_301_0@301_0@301_0@301_0@@H_301_0@301_0@301_0@301_0@@H_301_0@301_0@301_0@301_0@@H_301_0@301_0@

效果图:

5024dd9e8934fbe748caf4691.gif">

原因: 

当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥 也就是说,你的span是float:right,但是你文本还是float:none

如果要让两者占据同一行:

  1. 要么你把span先于文本显示@H_301_0@@H_301_0@ @H_301_0@@H_301_0@=@H_301_0@301_0@>@H_301_0@2007-08-18@H_301_0@span@H_301_0@> @H_301_0@示例第3行)
  2. 要么把文本也设成float:@H_301_0@@H_301_0@ @H_301_0@@H_301_0@=@H_301_0@301_0@>@H_301_0@新闻新闻新闻@H_301_0@@H_301_0@@H_301_0@

参考:  

转自:

猜你在找的CSS相关文章