html - 如果屏幕尺寸小于指定值，则将水平 block 转换为垂直 block-6ren

html - 如果屏幕尺寸小于指定值，则将水平 block 转换为垂直 block

转载作者：行者123 更新时间：2023-11-28 17:00:05

25

4

在下面的代码中，我希望水平的三列 block 放下并相互堆叠，以防容器的大小变得小于 X 像素(对于较小的或移动设备)。我应该如何以及在表格的哪个元素上应用此属性。请注意，代码是一个内容 block ，所以我不想让 CSS 应用于整个电子邮件模板或电子邮件 <body>除非这是解决此问题的唯一方法(例如使用 @media only screen and (max-width: 420px) )。

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

    <!-- Title: BEGIN-->
    <tr>
        <td>
            <h2>Title</h2>
        </td>
    </tr>
    <!-- Title: END-->

    <tr>
        <td>
            <table cellpadding="20">
                <tr>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
    <tr>
        <td height="30">
        </td>
    </tr>
</table>

最佳答案

您希望布局仅是三个横向还是三个向下？或者随着屏幕尺寸的减小，每个容器都可以换行到下一行吗？

您当前的代码只是在屏幕缩小时调整图像、文本和容器的大小。如果你只是想让容器在屏幕缩小时换行，你可以使用 <div> 来实现。标签和 float:left;和 max-width CSS。

您遇到的主要问题是每个容器都是一个完全独立的表格，每个容器都位于另一个表格内的完全独立的表格单元格中。

看看这个(运行代码片段并使用整页链接对其进行测试):

.container {
    background-color: #ffffff;
    max-width: 300px;
    float: left;
    margin: 10px;
    padding: 20px;
}

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

  <!-- Title: BEGIN-->
  <tr>
    <td>
      <h2>Title</h2>
    </td>
  </tr>
  <!-- Title: END-->

  <tr>
    <td>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
    </td>
  </tr>
  <tr>
    <td height="30">
    </td>
  </tr>
</table>

如果这不是您要找的，请告诉我。

另外，仅供引用，您的代码中有几个区域您应该重新考虑。具体来说，无论何时指定大小，都应该将单位放在一起。即 width="1024" ....1024 什么？如果是像素，则使用 1024px。更进一步，在 <img> 中元素你已经有 CSS 表示 width: 100%; .所以，还有 width="1024"是多余的和令人困惑的。

关于html - 如果屏幕尺寸小于指定值，则将水平 block 转换为垂直 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53726013/

25

4

0

文章推荐：动态设置 CSS 文件的 PHP 服务器 URL 或路径

文章推荐： html - 导航元素之间有目的的不均匀间距

文章推荐： javascript - 通过 .animate() 和 .css() 设置宽度之间的差异

文章推荐： html - 防止行扩展表格宽度

ActiveRecord测试哈希条件内大于/小于
问题:如果联接表的属性大于/小于值，是否可以在散列条件下进行测试例如:测试 Actor 年龄是否大于年龄变量: 是否可以写而不是 ARRAY CONDITION 的: ageVariable = 3
JavaScript:小于 + 大于
这个问题已经有答案了: How to check if a number is between two values? (12 个回答) 已关闭 6 年前。我目前正在 Codecademy 上学习
java - 检查连续元素是否不同(小于)
我想知道是否有一种方法可以比较 arrayList 中的连续元素。我有这个 for (int j=0; j< Index.size(); j++) { if(Index.get(j) < Ind
java - 切换大于/小于
我正在压缩一些代码，现在我有 4 种方法，它们几乎都做同样的事情，除了 for 循环的建模有点不同。我正在传递 int 的 up , down , right ，和left作为这个紧凑方法的参数，这与
mysql - sql时间查询大于/小于
SELECT DISTINCT s.sname, s.sid FROM student s, class c WHERE s.programme = 'CS' AND s.level = '2' AN
Java通过命令行读取文件，<(小于)符号
我正在尝试通过命令行读取文件名，这是教授要我们输入的命令: java MultiBinaryClient xxxxxx.edu 6001 < files.txt 我正在尝试使用 args[3]获取文
C# 方括号和大于/小于
在 C# 中，您可能会看到以下内容: [] 或类似的行(但没有大于/小于符号): [assembly: AssemblyTitle("MyProject")] 我知道第一个称为属性(它有 gt 和 l
c - 内部工作大于/小于
我只是想知道大于/小于的结果是如何计算并返回给高级语言的。我在这里寻找硬件门模型。让我们用一个统一的例子来解释，比如说5 > 3。最佳答案它通常通过带有进位检测的减法来实现。从门控的角度来看
c - 小于(<)float与c中if语句的比较
这个问题在这里已经有了答案: strange output in comparison of float with float literal (8 个答案) 关闭 8 年前。案例一 float
ant - Apache Ant 小于
你到底如何检查一个数字属性是否小于 Apache Ant？从我所看到的(我是 Ant 的新手)你只能做 ? 最佳答案您可以使用 (见 http://ant.apa
c - 小于 FLT_EPSILON 的最大数字是多少？
在 C 中使用 float.h 我想知道如何找到最大的数字，如果我加到 1，答案将保持为 1。即 1 + x = 1 如何找到 x？最佳答案如果你想要“小于 FLT_EPSILON 的最大数字”
elasticsearch - Elasticsearch-小于-1个字节的值不受查询节点支持
我正在尝试查询节点统计信息端点(_nodes / stats)并收到此错误: {"error":{"root_cause":[{"type":"illegal_argument_exception",
java - 有没有更快的方法来检查列表中的某个项目是否大于、小于、等于某个数字？
有没有更快的方法来检查列表中的项目是否大于、小于或等于某个数字？或者你只需要循环它？我只是好奇是否有为此预先构建的函数。示例: 列表包含 5、5、10、15、15、20。我想检查是否有多少个
java - 如何比较已转换为整数的字符串的值(大于/小于)？
因此，我必须编写一个代码，从用户那里获取 2 个日期(月/日/年)，如果第一个日期小于第二个日期，则返回“true”。在任何其他情况下，日期将为“假”或“它们是相同的”。我被告知我不能要求用户执行指定
javascript - 优雅地检查两个变量之间的范围是否大于/小于 'x'
我有两个变量，如果它们的值彼此相差在 5 个数字以内，我想触发一些代码。不知道哪个变量具有更高的值，我可以这样做: if (var1 > var2) { if ((var1 - var2) < 5
java - 小于 ObjectOutputStream 基元的基元数组
我有一个函数，它接受一个对象并将其转换为字节数组: public static byte[] serialize(Object obj) throws IOException { try(By
android - 小于 4MB 的即时应用程序
下载大小已经低于 4MB 的应用程序是否也可以作为免安装应用程序未经修改地分发？最佳答案要将该应用程序作为免安装应用程序提供，仍需采取一些步骤。参见 http://g.co/instantapps
MySQL WHERE 子句 - 年龄大于/小于
我有以下 SELECT 但无法正常工作: SELECT COUNT(userid) FROM login WHERE 17 YEAR(DATE_SUB(NOW(), INTERVAL TO_DAYS
javascript - if 小于 on .length 的条件不能精确工作
我制作了一个脚本，其中 #hsz-wrap2 附加到最后一个可见的 div，当 div 数量低于或等于 16 在 #snapshot_vertical div 内。但是，if 条件的工作方式我不明白
html - 小于 992px 的捕捉点搜索框定位出错？
我在外部的一排内放置了一个 Logo 、一个搜索框和一个语言栏，并位于 Bootstrap 导航栏上方。这一行当然仍在主容器中，但它包含我提到的 3 个元素——我和我的客户认为这 3 个元素独立于导航

首页

博学

6Ren·AI

商城

html - 如果屏幕尺寸小于指定值，则将水平 block 转换为垂直 block