Question

给定一个模板，由于其他要求无法修改HTML，如果在HTML中不按顺序显示（重新排列）另一个div之上的div，该怎么可能？两个div都包含高度和宽度不同的数据。

class Ajax {
    url: string;
    xmlData: string;
    mode: bool; 
    response: string;
    objHttpReq:any;

    constructor (postUrl: string, postXml: string, postMode: bool) {
        this.url = postUrl;
        this.xmlData = postXml;
        this.mode = postMode;       
        this.objHttpReq = new XMLHttpRequest(); 
        this.objHttpReq.mode = this.mode;   

        this.objHttpReq.onreadystatechange =()=> this.OnRStateChange();

        this.objHttpReq.open("Post", this.url, this.mode);
        this.objHttpReq.send(this.xmlData);         
    }                   

    OnRStateChange(){               
        if (this.objHttpReq.readyState==4 && this.objHttpReq.status==200)
                    //here this refers to Ajax
        {
            //alert(xmlhttp.status);
            if( this.objHttpReq.mode == false)
            {
                alert(this.objHttpReq.responseText);
            }
            else
            {
                alert(this.objHttpReq.responseText);
            }
        }   
    }
}

其他元素希望很明显，期望的结果是：

在这种情况下要满足的内容在这种情况下内容如下其他要素当尺寸固定时，很容易将它们定位在需要的位置，但是当内容变化时我需要一些想法。为了这种情况，请仅考虑两者的宽度为100％。

编辑：CSS解决方案是最理想的解决方案。感谢您提到的Javascript选项。不要过于专注于什么或为什么（或谁）......我特意寻找一个仅限CSS的解决方案（如果不能解决，可能必须满足其他解决方案）。

还有......在此之后还有其他元素。鉴于我所展示的有限情景，我们提到了一个很好的建议 - 鉴于它可能是最好的答案，但我也希望确保其后的元素不会受到影响。

Answer 1

使用CSS3 flexbox布局模块，您可以使用order或flex-direction: column-reverse。如果您希望以相反的顺序（首先是底部元素，最后一个元素）重新排列元素并且避免使用顺序值，后者会更好。由于您不希望其他元素受到影响，请使用订单解决方案。

值得注意的是：

order仅更改绘制顺序而不是DOM顺序。

flex-direction不会影响绘画顺序，只会影响流程的方向。

#wrapper {
  display: flex;
  flex-direction: column;
}
#secondDiv {
  order: -1; /* Negative order because default value is 0 */
}

<div id="wrapper">
  <div id="firstDiv">
    Content to be below in this situation
  </div>
  <div id="secondDiv">
    Content to be above in this situation
  </div>
  <div id="thirdDiv">
    Third div unaffected
  </div>
  <div id="fourthDiv">
    Fourth div unaffected
  </div>
</div>

#wrapper {
  display: flex;
  flex-direction: column-reverse;
}

<div id="wrapper">
  <div id="firstDiv">
    Content to be below in this situation
  </div>
  <div id="secondDiv">
    Content to be above in this situation
  </div>
</div>

Answer 2

您还可以给出相对于id wrapper的位置，并为包装器内的所有div提供绝对位置，然后根据顺序设置div的top属性。

HTML

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>

CSS

#wrapper {
    position: relative;
}
#firstDiv {
    position: absolute;
    top: 20px;
}
#secondDiv {
    position: absolute;
    top: 0px;
}

这是fiddle。

对于动态高度元素，您可以使用display：table properties。

HTML

<div id="wrapper">
    <div id="firstDiv">Content to be below in this situation</div>
    <div id="secondDiv">Content to be above in this situation Content to be above in this situation Content to be above in this situation Content to be above in this situation Content to be above in this situation
   </div>
</div>

CSS

#wrapper {
    display: table;
}
#firstDiv {
    display: table-footer-group;
}
#secondDiv {
    display: table-header-group;
}

这是fiddle。

使用CSS重新排序多个div

2 个答案: