Question

我将div分类为1,2,3 ......作为html布局

HTML：

<div class="bigdiv">
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
    <div class="div3">div 3</div>
</div>

CSS：

.div1 {
    float: left; 
}

.div2 {
    float: left;     
 }

 .div3 {
    float: left;     
 }

如何将div 重新排序为使用CSS的布局

<div class="bigdiv">
    <div class="div3">div 3</div>
    <br>
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
</div>

通过CSS（float，：after，：before）

我的尝试：

.div3 {
    float: right; 
} 
.div3:before {
    content: '\A\A';
    white-space: pre;
}

提前谢谢。

Answer 1

您可以使用CSS Flexible Box Layout Module

执行此操作

'order'属性控制弹性项目的显示顺序   在他们的弹性容器中，通过将它们分配给序数组。

Flex容器将从最低位置开始布置其内容   编号顺序组并上升。具有相同序数组的项目   按照它们在源文档中出现的顺序排列。这个   也会影响绘画顺序[CSS21]，就像元素一样   在文件中重新排序。（W3.org）

FIDDLE

CSS（没有浏览器细节）

.bigdiv {

    display: flex;
    flex-direction: row;
    }

.div1 {
    order: 2;
 }

.div2 {
    order: 3;
 }

.div3 {
    order: 1;
 }

Answer 2

您可以尝试使用display属性并使用此样式：

CSS

.bigdiv { display:table; }

.div1, .div2 { float: left; }

.div3 {  display: table-header-group; }

实例：http://jsbin.com/axekof/2/edit

请注意应用于主包装的display:table;和应用于.div3的显示属性。该示例甚至可以在IE8（未测试）

上工作

作为旁注，对于.div3，您可以同时使用display: table-caption和display: table-header-group，但会有一些细微差别：对于第一个属性，父元素仅包装.div1和.div2同时，使用后者，容器包装所有子元素（尝试将边框应用于.bigdiv，以便您可以清楚地看到差异）

Answer 3

<强> HTML：

<div class="bigdiv">
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
    <div class="div3">div 3</div>
</div>

<强> CSS：

.bigdiv {
    display:table;
    width:100%; 
}

.div1 {
    display: table-row-group;
}

.div2 {
    display: table-footer-group;
 }

 .div3 {
    display: table-header-group;
 }

结果将是：

div 3

div 1

div 2

对于那些讨厌的早期版本的Internet Explorer ...... Source

旧浏览器IE6和IE7不支持display：table family。的CSS属性。

此外，IE8在某些情况下会出现动态渲染错误：如果要移动的块包含preudo-table元素（display：table *）（这是当前唯一注意到的错误情况），则会出现一些伪表格单元格（每次重新加载页面时，此类单元格以及单元格数量都不同）最初渲染页面时，这些单元格可能会随机消失。

因此，对于IE8及更低版本，我们可以覆盖使块生效的CSS规则，并使用JavaScript而不是CSS将块移动到HTML文档的DOM树中的所需位置：

/**
 * Reorders sibling elements in DOM tree according to specified order.
 * @param {Array} elems Sibling elements in desired block order.
 */
function reorderElements(elems) {
    var count = elems.length;

    if (!count) {
        return;
    }

    var parent = elems[0].parentNode;

    for (var i = count - 1; i >= 0; i--) {
        parent.insertBefore(elems[i], parent.firstChild);
    }
}

// If IE8 or lower
if (document.all && !document.addEventListener) {
    var blocks = [
        document.getElementById('div3'),
        document.getElementById('div2'),
        document.getElementById('div1')
    ];

    reorderElements(blocks);
}

Answer 4

你不能只使用CSS，因为我看到你正在操纵DOM。但是，如果您仍然希望实现这一目标，则需要将position:relative用于bigdiv，将position:absolute用于.div1 .div2和.div3，这些实际上是孩子.bigdiv。然后，您需要使用left，top，right和bottom属性根据需要设置样式。

用css重新排序div

4 个答案:

CSS（没有浏览器细节）