`

css 关于float: right使用及靠右换行的解决办法

    博客分类:
  • css
CSS 
阅读更多

1、float: right的简单用法:使用代码<span style="float: right"> ******  </SPAN>,其中******就是你调用的元素,比如发布日期:{dateline},如果想让此元素靠右,则相应为:<span style="float: right">{dateline}  </SPAN>;
2、当使用span时,很多站长反映:靠右的元素和前面的元素被自动换行了,即不再在同一行内,原因是:当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。

也就是说:如果你在设置span是float:right时,把他放在所有元素的最前面就正常了,以下为举例(攻击调用三个元素,想让第三个元素靠右显示):
按顺序输入的方法是错误的: {forum}{subject}<span style="float: right">{dateline}  </SPAN> <br />
正确的方法:<span style="float: right">{dateline} </SPAN>{forum}{subject}<br />

分享到:
评论
5 楼 hpking 2014-05-22  
富容器 float:left 子 float:right
4 楼 dreamoftch 2014-02-20  
so nice
3 楼 sp42 2013-02-04  
哈哈 感谢!
2 楼 fireinjava 2011-12-12  
原来如此,谢谢~
1 楼 yyang1986321 2009-07-31  
谢谢啊,帮大忙了 

相关推荐

    E7 float:right 时元素换行出现在下一行的bug解决方法

    标题提到的问题是这样的:如果在一系列并排的块级元素中,只有最后一个元素设置了`float:right`,在IE7中,这个设置了浮动的元素不会像预期那样靠右显示,而是会跳转到下一行。这个问题的示例代码如下: ```html ...

    div中加入span右对齐后出现换行显示两种解决思路

    就类似说空间里面模块中模块名靠左,编辑字样出现在靠右,一般思路的话一定是认为通过分开两列,一个align=left,另一个align=right。后来我无意中发现有个东西叫,比如实现模块的效果就可以:文章&lt;span&gt;&lt;a&gt;编辑&lt;/a&gt;&lt;/...

    多个div能不换行吗?

    2. **使用 `float` 属性**:将 `div` 设置为浮动元素,它们会在其父容器中尽可能多地靠左(`float: left`)或靠右(`float: right`)排列。但是,这种方法可能导致父元素高度塌陷,需要额外的清理样式来修复。例如:...

    CSS 浮动.pdf

    浮动(Float)是CSS布局中一种古老但仍然重要的技术,它最初设计用于创建多列布局,如杂志或报纸的版面设计。浮动元素会从当前的正常文档流中移出,向左或向右移动,直到它们的边框接触到包含它们的容器的边框或者...

    css float属性_动力节点Java学院整理

    在实际应用中,当多个浮动元素相邻时,`float: left`的元素会靠左排列,`float: right`的元素会靠右排列。如果一行无法容纳所有浮动元素,它们会自动换行,这种行为类似内联元素的特性。此外,由于内联元素的特性,...

    韩顺平.php从入门到精通笔记 div+css

    浮动(float)属性则用于调整元素在页面上的位置,如左浮动(float: left)和右浮动(float: right),可以实现元素的排列和自适应布局。 总之,PHP开发者在掌握后端技术的同时,了解Div+CSS布局和CSS选择器的运用...

    CSS中如何把Span标签设置为固定宽度.pdf

    最后,对于一个li元素内的span元素,若希望它靠右对齐且不换行,可以使用绝对定位。例如: ```css li { position: relative; } li span { position: absolute; right: 0px; } ``` 这将使得span元素相对于其父元素...

    浏览器兼容问题解决方案

    浏览器兼容性问题一直是Web开发中的一个棘手挑战,尤其是在CSS样式方面。以下是一些针对不同浏览器,特别是IE7、6和Firefox的兼容性处理方法: 1. **CSS垂直居中问题**: 当需要使一个div内的内容垂直居中时,可以...

    html之CSS设计(float定位和position定位详细分析)

    4. **浮动的使用**:通过设置`float:left`或`float:right`,元素将沿指定方向浮动。例如,当多个元素都设置`float:left`时,它们会并排显示,直到一行放不下再换行。 5. **清除浮动**:为了避免父元素因子元素浮动...

    css浮动(float,clear)通俗讲解经验分享

    浮动(float)是CSS布局中一个重要的概念,主要用来创建多列布局或使元素在容器内进行自适应排列。本文将详细解释浮动的工作原理,并通过实例来帮助理解。 首先,浮动的作用是让元素脱离正常的标准流(normal flow)...

    css入门笔记

    取值:left左 right右 top上 bottom下 px (%)少用 取值:auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色 2.背景图片 属性:background-image:url(); 取值:url() ...

    CSS+DIV.ppt

    `&lt;span&gt;`的使用方法与`&lt;div&gt;`相似,但不会自动换行。 在CSS中,盒模型是理解元素尺寸和布局的关键。每个HTML元素都可以看作一个具有宽度、高度、内边距(padding)、边框(border)和外边距(margin)的盒子。外边...

    css(display,float,position)深入理解

    3. `right`:元素向右浮动,其他非浮动元素会尽可能靠右排列。 浮动的主要目的是打破文档流的默认规则,使元素可以按照我们的布局需求进行显示。浮动元素会从当前的行流中移出,如果空间不足,会自动换行。文字和...

    CSS中将Span标签设置为固定宽度的方法

    补充一个小技巧,关于如何在 `li` 元素中使内部 `span` 靠右对齐且不换行: ```css li { position: relative; } li span { position: absolute; right: 0px; } ``` 通过这种方式,`&lt;span&gt;` 会相对于其父元素 `li...

    Web前端开发初级理论考试.docx

    `left`使元素向左浮动,`right`使其向右浮动。 17. `z-index`属性:`z-index`用于设置元素的堆叠顺序,数值越大,元素在页面上的层级越高,越靠前显示。 18. `position`属性:`position`属性用于定义元素的定位...

    css_position

    以上是关于“css_position”主题的核心知识点,理解并熟练运用这些技术,可以实现各种复杂且美观的网页布局。在实际项目中,结合使用这些定位方法,可以创造出极具交互性的网页设计。在`css_position-master`这个...

    详解利用clear清除浮动的一些问题解决

    clear:right是防止元素靠右浮动元素的右边;clear:both是防止元素靠左或靠右浮动元素的左右两边。当指定为clear:none时,则没有效果,元素可以与浮动元素相邻。 在讨论清除浮动时,我们经常遇到的一个问题是如何...

    前端开发与实践- DIV与SPAN.pptx

    - `relative`:元素相对于其正常位置定位,可通过 `left`、`right`、`top` 和 `bottom` 属性调整位置。 - `fixed`:元素相对于浏览器窗口定位,即使在滚动页面时也会保持固定位置。 `z-index` 属性用于控制图层的堆...

Global site tag (gtag.js) - Google Analytics