Question

为了使HTML组件响应，我想使用媒体查询来组合此表中的列对：

<div style="display: table">
    <div style="display: table-cell">1</div>
    <div style="display: table-cell">2</div>
    <div style="display: table-cell">3</div>
    <div style="display: table-cell">4</div>
</div>

使（有效）类似于：

<div style="display: table">
    <div style="display: table-cell">
        <div style="display: block">1</div>
        <div style="display: block">2</div>
    </div>
    <div style="display: table-cell">
        <div style="display: block">3</div>
        <div style="display: block">4</div>
    </div>
</div>

这样做的一种方法是使用其他div来包围第一个标记：

<div style="display: table">
    <div style="display: inline">
        <div style="display: table-cell">1</div>
        <div style="display: table-cell">2</div>
    </div>
    <div style="display: inline">
        <div style="display: table-cell">3</div>
        <div style="display: table-cell">4</div>
    </div>
</div>

然后，在断点处，适当地更改显示属性。那会有效吗？有没有更好的办法？（请注意，由于各种原因，我需要使用显示“table”和“table-cell”，这与垂直扩展有关）。

Answer 1

您的问题有点模糊，因此很难提供准确的回复。我建议你设置一个jsfiddle，这样你就可以更具体了。

也就是说，如果您想拥有自适应HTML组件，最简单的方法就是使用网格系统，例如Materialize和Bootstrap提供的网格系统。

如果有什么理由不适合你，请告诉我，也许我（或其他人）可以为您提供更具体的信息。

响应表和堆叠列

1 个答案: