Question

定义DIV时，CSS样式中的right属性和margin-right属性的作用分别的什么?

我想控制DIV的位置，有一个大的DIV，里面有3个DIV。其中一个在左边，其余两个在右边，这两个分别是两行。当我已经设置了right属性时，再设置margin-right属性才有效果，否则就没效果。这是怎么回事?

Answer 1

!important指的是优先级最高，会覆盖其他样式。float:right
!important；指的就是这个元素会右浮动，margin-right:0%
!important；指的是这个元素的右外边距为0，就算有其他同属性的样式，也会被带有!important的属性覆盖。

Answer 2

right是在 使用position的时候用的绝对定位或者相对定位，一般情况下不建议使用。
margin-right是设置右边边距的。
你和这个需求我觉得需要用 float:left 或者float:right 浮动

追问

哦 我已经设置了float了，但是就是不知道他们之间的移动是以什么为标准的，好像标准不一样...

追答

左边的 左对齐 右边右对齐。宽度不够换行。
或者全部左对齐 右对齐就行 可以用margin来设计两个div的间隔

Answer 3

一个大的div有3个div，按你的要求应该是先左浮动一个，在有浮动一个，清除浮动clear：both；然后再有浮动一个。如果没有清除浮动那个属性将产生你说的margin-right可能失效。二楼你看看你写的一个div里面包含四个div啦

Answer 4

right设置了position:absolute;的时候再用，一般默认就行。

写了个例子你看下，

<div style ="border:1px solid #000;width:800px;height:800px;margin:0 auto;">
<div style ="border:1px solid red; width:398px;height:798px; float:left;">
</div>
<div style = "border:1px solid blue;height:798px;width:398px; float:left;">
<div style = "border:1px solid #ccc; height:200px; width:396px"></div>
<div style = "border:1px solid #ccc; height:200px; width:396px"></div>
</div>
</div>

Answer 5

Vue实践-CSS样式position/display/float属性对比使用