4

我将 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;     
 }

如何使用 CSS 将div 重新排序到此布局

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

通过 CSS（浮动，：之后，：之前）

我的尝试：

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

先感谢您。

4

4 回答 4

11

您可以使用CSS 灵活框布局模块来做到这一点

'order' 属性通过将弹性项目分配给有序组来控制弹性项目在其弹性容器中出现的顺序。

弹性容器将从编号最小的序数组开始布局其内容并向上。具有相同序号组的项目按照它们在源文档中出现的顺序排列。这也会影响绘制顺序 [CSS21]，就像元素在文档中重新排序一样。( W3.org )

小提琴

CSS（没有浏览器细节）

.bigdiv {

    display: flex;
    flex-direction: row;
    }

.div1 {
    order: 2;
 }

.div2 {
    order: 3;
 }

.div3 {
    order: 1;
 }
于 2013-08-01T07:33:42.530 回答
5

您可以尝试在该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-captionand display: table-header-group，但有一点不同：第一个属性，父元素只包裹.div1，.div2而后者，容器包裹所有子元素（尝试对.bigdivso应用边框你可以清楚地看到差异）

于 2013-08-01T07:26:02.320 回答
2

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;
 }

结果将是：

分区 3

分区 1

分区 2

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

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

此外，IE8 有一个动态渲染错误，在某些情况下会出现：如果要移动的块包含 preudo-table 元素（显示：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);
}
于 2015-11-16T21:35:07.467 回答
-1

正如我看到你正在操纵 DOM 一样，你不能只用 CSS 来做到这一点。但是，如果您仍想实现这一目标，则需要使用position:relativefor bigdiv 和position:absolutefor .div1 .div2and .div3，它们实际上是.bigdiv. 然后，您需要使用left、top、right和bottom属性来根据需要设置它们的样式。

于 2013-08-01T07:23:11.917 回答