`
leon1509
  • 浏览: 538309 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

不用 float 让 div 居右

    博客分类:
  • CSS
 
阅读更多
一个大的 div 里面有且只有一个小的 div,为了让小的 div 居右,可以使用 float,但大家都知道 float 会带来兼容方面的一些麻烦,为了使结构不那么复杂,可以使用 text-align、margin 来实现居右。

为了兼容 IE,对大的 div 指定样式:

text-align:right;
为了兼容 FF,对小的 div 指定样式:

margin:0px auto 0px auto;
同样,如果要居中:text-algin 可指定为 center,margin 的左、右边距可指定为 auto。


总结一下:
1. 定义CSS样式表
<style>
.div-right{ text-align:right;margin:0px auto 0px auto;}
</style>

2. 定义div

<div class="div-right">内容居右</div>
分享到:
评论

相关推荐

    不用float实现div模块居中布局

    不用float实现div模块居中布局 在网页布局中,实现div模块居中的方法有很多,但是一般来说,使用float属性是最常见的方法之一。然而,在某些情况下,我们可能需要不使用float属性来实现div模块居中布局。这时,我们...

    Css设置img属性让图片水平居中/居左/居右的写法

    总的来说,要实现图片的水平居中、居左或居右,推荐的方法是使用CSS的`float`属性和`margin`属性。浮动可以用于图片的左右对齐,而通过设置自动的左右外边距`margin: auto;`可以实现图片的水平居中。这些方法简单、...

    DIVCSS学习(入门)教程.pdf

    如果想要菜单居右显示,可以将`float:right`应用于`#menu ul`。对于菜单项间的竖线,可以创建一个额外的`&lt;li&gt;`,并用类选择器(`.menuDiv`)来定义一条1像素宽的背景色线。 整个过程中,不断预览页面以检查布局效果...

    两个div并排的实现代码

    为了让`div`元素不重叠,我们需要设定它们的宽度以及它们之间的边距。在给出的代码中,`.onediv`和`.twodiv`都有相同的宽度(90px),并且设置了左右内边距(margin-left: 5px)以提供间隔。 ```css .onediv, ....

    DIV+CSS

    &lt;div class="box1" style="float:left;"&gt;&nbsp;&lt;/div&gt; &lt;div class="box2" style="float:left;"&gt;&nbsp;&lt;/div&gt; &lt;div class="box3" style="clear:both;"&gt;&nbsp;&lt;/div&gt; ``` 这里的`.box3`元素通过设置`clear:both;`确保...

    div+css网站前台工程师设计之路必修.pdf

    然后设置`#banner`的高度,以及通过浮动元素(`float: left`和`float: right`)让`#content`居左,`#links`居右。为了使`#links`位于`#content`右侧,需要通过负margin和padding来调整元素的位置。 - `#content`的...

    居中,自定义布局小点整理

    float: left; width: 200px; } .right { overflow: hidden; } &lt;div class="left"&gt;左侧栏&lt;/div&gt; &lt;div class="right"&gt;右侧栏&lt;/div&gt; ``` 3. flex=1: 使用 `flex: 1;` 属性可以实现双飞翼布局。 例如: ```...

    CS187-最终项目:这是我的CS187最终项目

    CS187-最终项目&lt;title&gt;CS187 Final Project&lt;/title&gt;&lt;style&gt;... } div.floatright {float:right; 文本对齐:居中; 宽度:500像素; } div.floatleft {float:left; 文本对齐:居

    jquery任意位置浮动固定层插件用法实例

    2. 内置固定位置调用,提供了多种预设的位置参数,如右下角、左下角、右上角、左上角、居中等,示例代码如下: ```javascript $("#id").floatdiv("rightbottom"); // 右下角 $("#id").floatdiv("leftbottom"); // ...

    清除浮动clear:both的应用详解

    浮动(Float)是CSS布局中的一个重要概念,常用于创建多列布局或使元素在容器内居侧显示。在HTML文档中,元素通过设置`float`属性(如`float:left`或`float:right`)可以使其脱离正常文档流,并向左或向右移动,直到...

    完美实现浮动元素横排居中显示

    因为float主要是为了将元素脱离文档流,并且向左或向右浮动,它本身没有提供居中对齐的功能。 **兼容性问题** 文章提到的兼容性问题,主要是旧版IE浏览器(比如IE7)对CSS的处理存在一些特殊性。比如,文章中提到...

    CSS网页布局,html布局

    这些章节涵盖了固定宽度和自适应宽度的组合,如左右两列布局(一列固定,一列自适应)、双列居中等。利用浮动(`float`)和清除(`clear`)属性,可以创建复杂的并排布局。 五、导航菜单 第九至十四章重点讲述了...

    前端开发中一些常用技巧总结

    1. **日期居右显示**:在显示文章列表时,将日期居右可以通过将`&lt;span&gt;`标签设置为右浮动来实现。CSS代码`p span{float:right}`可以使日期自动移动到右侧,此技巧适用于多种场景。 2. **Web标准与H1的使用**:根据...

    使用CSS3制作响应式导航菜单的方法

    导航列表`&lt;ul&gt;`的`margin`和`padding`设置为零,`&lt;li&gt;`元素使用`display: inline-block`而不是`float:left`,这样我们可以方便地通过改变`text-align`属性来调整菜单按钮的对齐方式,使其居左、居中或居右。...

    css中display:block;的用法及适用标签详解

    通过将它们的`display`属性设置为`block`,可以将内联元素转换为块级元素,使得可以为它们定义`width`、`height`,以及实现垂直居中或水平居中等布局效果。 在一般情况下,对于默认已经是块级元素的`&lt;div&gt;`,没有...

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

    补充一点,如果你想要在`&lt;li&gt;`元素中使`&lt;span&gt;`标签居右对齐且不换行,可以利用相对定位(relative)和绝对定位(absolute): ```css li { position: relative; } li span { position: absolute; right: 0px; }...

Global site tag (gtag.js) - Google Analytics