响应表和堆叠列

要使一个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>

然后，在断点处，相应地更改显示属性。那有效吗？有没有更好的办法？（请注意，由于各种原因，我需要使用显示“表”和“表格单元格”）。

来源

2017-06-15 stepanian

你的问题有点含糊，所以很难提供确切的答案。我建议设置一个jsfiddle，以便更具体。这就是说，如果你想要有响应的HTML组件，最简单的方法可能是使用网格系统，如Materialize和Bootstrap提供的网格系统。

如果有一个原因，为什么这些不会为你工作，让我知道，也许我（或其他人）可以为你提供更具体的东西。

来源

2017-06-15 19:34:29 yoursweater

我不确定你觉得模糊的部分是什么问题。请不要成为认为每个问题都可以通过框架解决的人。此外，这不是一个答案，它是一个评论。请删除它，以便其他人可以回答这个问题。谢谢。 – stepanian

我真的认为你可以在进攻端减少一点。无论如何，如果您只是使用媒体查询来调整每个div的宽度，则不需要添加额外的标记。如果你希望它是2x2而不是4x1，只需将div宽度改为50％即可。这将迫使两个显示在第二行。 – yoursweater

将宽度更改为50％将不起作用，因为这些是表格和表格单元格。 – stepanian

响应表和堆叠列

回答

相关问题