元素 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="https://www.jb51.cc/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="https://www.jb51.cc/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_6c6174fc-4120-46d4-a886-9ca4cfff05df">

<<

效果图:

5024dd9e8934fbe748caf4691.gif">

原因: 

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

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

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

参考:  

转自:

原文链接:https://www.f2er.com/css/70636.html

猜你在找的CSS相关文章