重新定位上述元素之上的div [英] Reposition div above preceding element

问题描述

在此设置 http://jsfiddle.net/PRX88/10/ thrid div可以理解看起来在第二个div的右边，尽管第一个div的右边有空间 - 它不会出现在第二个div的上面。

我会怎样没有：

• 使用绝对/相对定位来获得第三个div在第一个div的右侧（在当前黑色空间中） li>
  
• 依赖于高度值（在我的真实
  世界示例中这是变量）
  
• 无需重新排序div（我从语义上理解这不是最好的做法，但它的具体内容）

谢谢

解决方案

我也有这个问题，而且说实话，这是一个非常简单的解决方法，这不合逻辑。
您将div 3浮动到右侧，并将第一个div按1,2,3的顺序排列。所以他们出现：3,1,2。
这样，它所做的第一件事是向右浮动，它所做的下一件事就是将剩下的其他东西浮起来。
令人困惑？这里是代码。

您需要更改的css部分：

 
 #three {
 width：100px; 
背景：粉色; 
 float：right; 
 
 

HTML：

 < div id =wrapper> 
< div id =three>< / div> 
< div id =one>< / div> 
< div id =two>< / div> 
< / div> 
  

希望这可以帮助你！

In this setup http://jsfiddle.net/PRX88/10/ the thrid div understandably appears to the right of the second div, although there's space for it to the right of the first div - it is stopped from appearing above the second div.

How would I get the third div to sit to the right of div one (in the current black space) without:

• using absolute/relative positioning
• relying on height values (in my real world example this is variable)
• without reordering the divs (I understand semantically this isn't best practice but it's for something quite specific)

Thanks

解决方案

I had this problem too, and to be quite honest there is a real simple fix to this which is not logical. You float div 3 to the right, and put the div first in the 1,2,3 order. so they appear: 3,1,2. this way the first thing it does is float right, the next thing it does is float the others left. Confusing? here is the code.

The css part you need to change:

 #three {
    width: 100px;
    background: pink;
    float: right;
 }

The HTML:

<div id="wrapper">
    <div id="three"></div>
    <div id="one"></div>
    <div id="two"></div>
</div>

Hope this helps you out!

这篇关于重新定位上述元素之上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！