Question

我正在使用此表和css-trick解决方案来处理响应表。现在我还想做的是在表格更改后更改元素的顺序（768px），以便<h3>和图像更改顺序，使其为1. title，2。image，3。text。

我该怎么做？

这是我有什么安慰

<table border="0">
    <tbody>
        <tr>
            <td class="aimg">
                <img src="#">
            </td>
            <td class="atext">

<h3>Title 1</h3>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </td>
        </tr>
        <tr>
            <td class="aimg">
                <img src="#">
            </td>
            <td class="atext">

<h3>Title2</h3>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </td>
        </tr>
    </tbody>
</table>

CSS

.actions table td {
    vertical-align: top;
}
.actions table td.aimg {
    width:175px;
    padding-bottom:20px;
}
.actions table td.atext {
    padding-left:20px;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    .actions table, thead, tbody, th, td, tr {
        display: block;
    }
    .actions table tr {
        border-bottom:1px dashed #c0c7c7;
        margin-bottom:20px;
    }
    .actions table td.aoptions {
        padding-left:0px;
    }
}

Answer 1

<强> Fiddle

由于表格标记，这有点棘手。基本上，你给出 tr 这个css：

position: relative;

然后将标题绝对位于左上角，并根据标题的高度为图像指定正确的顶部填充。

可能有更好，更灵活的解决方案。

另外......为什么你使用表格标记来表示一个明显没有表格的元素？

如何更改表内元素的顺序？

1 个答案: