Question

我创建了一个表宽4张图像，这些图像放在一行和四列（1x4）中。

onSectionRendered

我的问题是我需要在手机中看到两行两列（2x2）中的图像。（就像这样）

<table class="insrtTable">

     <tr>
      <td><img src=Guitarra.png></td>
      <td><img src=Bajo.png></td>
      <td><img src=Teclado.png></td>
      <td><img src=Ukelete.png></td>
     </tr>
</table>

我该怎么做？我看到很多负责任的表将1列和4行转换为4列1行，但我找不到适合我的表。

Answer 1

要回答实际问题，是的，您可以制作一些响应式表格，但这会涉及unnecessary hacking table，因为<div class="container"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div> .container { display: flex; flex-wrap: wrap; } .container > .col { background: tomato; padding: 16px; border: 5px solid black; width: 50%; } @media (min-width: 599px) { .container > .col { width: 25% !important; } } s从来没有意味着回应70年代时的回复创建。当你尝试用它们做更多高级的东西时，你可能会用尽选择。

CSS中布局的现代方法是使用像flexbox这样的东西。你可以解决这个问题：

flex-wrap: wrap

在此处查看此行动：https://codepen.io/nicooga/pen/MEwZgZ。关键是{{1}}，如果元素超出容器的大小，则允许元素溢出到下一行。

您需要了解的有关flexbox的所有内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

似乎在原生css中有一个全新的网格系统似乎可以完成所有关于flexbox的优点：https://css-tricks.com/snippets/css/complete-guide-grid/。

Answer 2

尝试使用像Flexbox或Bootstrap网格系统这样的网格系统。你也可以制作自己的网格系统，但你只需要重新发明轮子。

响应性也与标记CSS属性的方式有关，一个简单的例子： -

<div class="container">
Text content </div>

.container {
width:3px;   <!-- vs width:3%; --> }

使用％值代替像素硬编码值可能会对您的网站响应能力产生影响。

开发自己的网格系统的有用资源 - https://zellwk.com/blog/responsive-grid-system/

Answer 3

您正在寻找的是＆＃34;响应＆＃34;而不是＆＃34;负责。＆＃34;

我该怎么做？我看到很多负责任的表将1列和4行转换为4列和1行，但我找不到一个对我有用的表。

大多数人使用Bootstrap列来实现这一目标。

Answer 4

您可以尝试这个简单的解决方案。

首先，添加一个td占位符，用于打破行（td with class resp）

   <table class="insrtTable">

        <tr>
            <td><img src="img1.png"></td>
            <td><img src="img2.png"></td>
            <td class="resp"></td>
            <td class=""><img src="img3.png"></td>
            <td class=""><img src="img4.png"></td>
        </tr>
    </table>

然后将以下样式应用于表：

@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) {

    thead, tbody, th, td.resp, tr {
        display: block;
    }
}

当您将浏览器窗口的大小减小到768px以下时，它将在第一行中断2个图像，在第二行中断开2个。

您可以将此方法应用于超过4列，并在您需要的地方设置占位符。

Answer 5

无法使用表格进行响应式设计。使用其他方式。我建议使用flex-container或float并清除。 This网站适用于弹性容器。

响应式CSS表

5 个答案: