Question

我想更改特定宽度(max-width : 640px)上div的顺序。在我的JSFiddle示例中，当窗口宽度小于640px时，我希望第二部分的黄色框位于文本下面。

我希望第二部分在那个宽度上像第一部分一样。而不是黄色的盒子，我将使用图像，所以每次在那个宽度的图像应该在文本下，无论它们如何放在HTML中。

以下是JSFiddle示例。

    <!-- Cell 1 -->
    <div class="tableCell">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
    </div>

    <!-- Cell 2 -->
    <div class="tableCell">
        <div id="box"></div>
    </div>

Answer 1

为什么CSS表在这种情况下无效

假设有两个选项来定位元素margin和position: relative，它们都不适用于表格单元格元素。 （margin is not applicable表格单元格以及相对定位的效果未定义为。

<强> 8.3 Margin properties 'margin'

适用于：所有元素除了元素表格显示类型   除了table-caption，table和inline-table

<强> 9.3.1 Choosing a positioning scheme: 'position' property

position:relative对table-row-group的影响，   table-header-group，table-footer-group，table-row，   table-column-group，table-column，table-cell和   table-caption元素未定义。

因此，您可能需要使用其他布局方案。

选择布局方法

还有另外两个选项来创建列，CSS浮点数和内联块（实际上有三个。第三个，CSS Flexible box layout在当时的现代Web浏览器中是only supported写作;因此我忽略了那个）。

由于内容应该在中间垂直对齐，我会使用inline-block列。

重要提示：您应该删除white-space between inline-block elements （本例中的列），以防止布局被破坏（通过两个50％的列）。

列排序

为了将列推送和/或拉到一侧，您可以使用正/负margin值或使用相对定位并指定left / right属性。< / p>

例如，使用margin您将拥有：

<强> EXAMPLE HERE

.col {
    width: 50%;

    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;

    -webkit-box-sizing: border-box; /* to calculate width of the box including */
    -moz-box-sizing: border-box;    /* borders and padding (10px left/right)   */
    box-sizing: border-box;
}

.col.push-right { margin-left: 50%; }
.col.push-left { margin-left: -100%; }

@media only screen and (max-width : 640px) {
    .col {
        display: block;
        width: auto;
        text-align: center;
        padding: 10px;
    }

    .col.push-right, .col.push-left {
        margin-left: auto;
    }
}

或者通过使用相对定位，您最终会得到：

<强> EXAMPLE HERE

.col {
    /* other declarations as above... */
    width: 50%;
    position: relative;
}

.col.push-right { left: 50%; }
.col.push-left { right: 50%; }

@media only screen and (max-width : 640px) {
    .col {
        /* other declarations... */
        display: block;
        width: auto;
    }

    .col.push-right { left: auto; }
    .col.push-left  { right: auto; }
}

无论inline-block列如何，大多数CSS框架（例如Twitter Bootstrap和Zurb Foundation）都广泛使用此方法。

此外，在上述两种方法中，您的HTML标记应如此更改：

<div class="container">
    <div class="col push-right">
        <p>Lorem ipsum....</p>
    </div><!--  comment out spaces/new lines/tabs between
                these two inline-block columns in order to remove the gap.
     --><div class="col push-left">
        <div id="box"></div>
    </div>
</div>

Answer 2

我知道有一种改变CSS顺序的真正方法（任何其他方式都是一种黑客行为）。您需要使用flexbox。

问题在于无法区分您的父元素是否包含框。我建议添加额外的课程。

话虽如此，这是你可以改变第二行的顺序：

.tableRow {
  display: flex;
  flex-direction: column-reverse;
}

或使用order属性

.tableRow {
  display: flex;
  flex-direction: column;
}
.tableCell {
  order: 2;
}
.tableCell:first-child {
  order: 1;
}

CSS-Tricks有一个很好的flexbox reference。

Answer 3

您可能想要使用:before和:after：jsfiddle.net/ra64oyk2

在正常屏幕上，您将使用:before（左）和:after（右）。
在缩小的屏幕上，您将使用:after。

现在您可以删除包含框的div。

要保留原始布局，您需要更改.tableCell元素的子元素，以便获得display: table-cell。然后，您可能想要更改一些类名。

为了知道将图像放在标准屏幕大小的哪个位置，请在包含文本的div.tableCell中添加一些类名：

imgRight
imgLeft。

然后你可以将它添加到你的CSS：

.tableCell.imgRight:after {
    content: ' ';
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
}

.tableCell.imgLeft:before {
    content: ' ';
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
}

.tableCell > * {
    display: table-cell;
    vertical-align: middle;
}


@media only screen and (max-width : 640px) {
    .tableCell > * {
        display: block !important;
    }
    .tableCell:after {
        content: ' ';
        width: 200px;
        height: 200px;
        background: yellow;
        display: block !important;
        margin: 0 auto;
    }
    .tableCell:before {
        display: none !important;
    }
}

Answer 4

要更改HTML的实际顺序，最佳（也是最不可能）的方法是使用Javascript。

由于您的问题中有jQuery标记，我假设您可以使用jQuery更改div顺序：

<!-- (best if you label those columns per-row e.g. firstColumn, secondColumn) -->
<div class="tableCell firstColumn">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac facilisis ante. Aenean et augue feugiat, gravida ligula quis, pharetra quam. Integer nec sodales erat. Mauris fringilla eleifend condimentum. Cras eleifend sodales nisi in tempor.</p>
</div>

<div class="tableCell secondColumn"> 
    <div id="box"></div>
</div>

然后为你的Javascript：

window.onresize = function(){
    if ($('body').width() < 640){
        //if body width is less than 640px, then put the second column before the first column
        $('.tableCell.firstColumn').insertAfter(".tableCell.secondColumn");
    }
    else{
        //if body width is more than or equal to 640px, then reset the ordering.
        $('.tableCell.secondColumn').insertAfter(".tableCell.firstColumn");
    }
}

你可以进一步优化我写的Javascript，但你明白了。

以下是应用于第一行的演示：jsFiddle

此外，Cuth在这里也提供了一个非常好的答案：使用flexbox。如果您不担心某些版本的IE不支持flexbox而Opera Mini中完全不存在，那么我强烈建议您改用该答案。

在特定宽度上更改HTML列顺序

4 个答案:

为什么CSS表在这种情况下无效

选择布局方法

列排序