Question

如果我有两个div元素。两者都有相似的父位置和浮点数：右边的样式属性。哪一个比另一个更正确？我希望能够告诉div1应该是最正确的，div2跟在div1之后。或者其他方式，但这个顺序必须是确定性的。

感谢。 UPD：我不想依赖html页面中div的顺序。我的html页面gots是从java / jsp生成的，所以我不能完全确定将首先生成和编写哪个div。还有其他解决方案吗？

Answer 1

＆＃13;

.right {
  background: green;
}
.right-too {
  background: red;
}
div {
  float: right;
  height: 20px;
  width: 100px;
}

＆＃13;

<div class="right">RIGHT</div>

<div class="right-too">RIGHT TOO</div>

＆＃13;

在代码中首先出现的那个将在右边。

编辑：添加了一个代码段

Answer 2

根据CSS规范，代码中出现的第一个浮动元素将放在右侧，然后是第二个浮动元素。

如果线上没有足够的空间，那么第二个浮动元素将出现在第一个元素下方。

参考：http://www.w3.org/TR/CSS21/visuren.html#floats

另外，请注意块格式化上下文：

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

p {
  overflow: auto; /* this creates a block formatting context */
}
img {
  float: right;
}

<p>
<img src="http://placehold.it/100x100">  
<img src="http://placehold.it/100x200">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>

<p>
<img src="http://placehold.it/700x100">  
<img src="http://placehold.it/100x200">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>

Answer 3

第一个更正确..

<div style='width: 600px; height: 200px; border: 1px solid black;'>
    <div style='width: 200px; height: 100px; background-color: yellow; float: right;'>A</div>
    <div style='width: 200px; height: 100px; background-color: green; float: right;'>B</div>
</div>

这是jsfiddle：http://jsfiddle.net/q6wnm4dv/

Answer 4

您在HTML中编写的第一个将是右侧的第一个。

HTML：

.wrapper {
    width: 100%;
    height: 50px;
}

.div1 {
    float: right;
    background-color: red;
    height: 50px;
    width: 50px;
}

.div2 {
    float: right;
    background-color: blue;
    height: 50px;
    width: 50px;
}

CSS：

{{1}}

您可以在此处查看工作示例：https://jsfiddle.net/mgjdjf62/

订购商品的最佳方式是使用flexbox：a guide to flexbox

两个具有相同值的元素：float：right;哪一个优先？

4 个答案: