在后面的元素的末尾放置div框 [英] Position div box at the end of after ensuing elements

问题描述

如果我有以下庄园中订购的3个Div框（任何数字）：

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

如何使用div

one 在不改变html结构的情况下显示在 三个 c>的div之后？

这是html应显示为：

  ________________________ 
 | ____________________ | 
 | | id = two | | 
 | | | | 
 | | __________________ | | 
 | ____________________ | 
 | | id =三| | 
 | | | | 
 | | __________________ | | 
 | ____________________ | 
 | | id = one | | 
 | | | | 
 | | __________________ | | 
 | ______________________ | 
  

解决方案

这可能取决于div之后。如果没有什么，你可以使用 position：absolute; top：100％; 在第一个div上实现：

 < div id =容器> 
< div id =one>< / div> 
< div id =two>< / div> 
< div id =three>< / div> 
< / div> 
  

  #container {position：relative; border：1px solid red; } 
 #one {position：absolute; top：100％; } 
 #one，#two，#three {width：300px; height：200px; border：1px solid #ccc; } 
  

http://jsfiddle.net/xjnrE/

但是，如果 #container div，它会在 #one （至少部分，取决于高度;参见 demo ）。

请记住，如果元素是在流中而不是浮动的），它将根据标记上的出现顺序（因此，DOM）来呈现。这意味着您必须使用JavaScript来更改DOM中元素的实际位置：

  var container = document.getElementById '容器'）; 
 var one = document.getElementById（'one'）; 
 container.appendChild（one）; 
  

http://jsfiddle.net/xjnrE/3/

If I have 3 Div boxes (any number really) ordered in the following manor:

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

How can I make the div with id one be displayed after the div with id three without changing the structure of the html?

This is what the html should be displayed as:

________________________
| ____________________ |
| | id=two           | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=three         | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=one           | |
| |                  | |
| |__________________| |
|______________________|

解决方案

It's possible depending on what comes after those divs. If there's nothing there, you can use position: absolute; top: 100%; on the first div to achieve that:

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>​​​

​#container { position: relative; border: 1px solid red; }
#one { position: absolute; top: 100%; }
#one, #two, #three { width: 300px; height: 200px; border: 1px solid #ccc; }

http://jsfiddle.net/xjnrE/

However, if there's anything after the #container div, it will be under #one (at least partially, depending on the height; see demo).

Keep in mind that if the element is "in the flow" (i.e., it's not positioned and not floated), it will be rendered according to the order of appearance on the markup (and, consequently, the DOM). This means you must resort to JavaScript to change the actual position of the element in the DOM:

var container = document.getElementById('container');
var one = document.getElementById('one');
container.appendChild(one);

http://jsfiddle.net/xjnrE/3/

这篇关于在后面的元素的末尾放置div框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！