Question

目前，我有一个<table>用于整个页面，一个<table>用于标题。在标题表中有两列填充了两个简单的图像。请参阅下面的第一个结果：

这些列是响应式的，但我想要做的是使标题的最大宽度为640像素，最小宽度为640像素。假设图像只是一个例子，因为我想要使用的其他图像较小，事实是这些图像之间没有空间。我可以添加一个填充，但响应性不再适用。

第二种是当我使窗口变小时，右侧的图像位于第一张图像下面，这是好的（请参阅下面的响应结果）。但是当屏幕尺寸低于640像素时，这种情况就已经发生了，而不仅仅是当窗口接触到右侧的图像时。

响应结果：

我需要做什么才能使标题最小和最大为640像素，并且当窗口低于640像素时可以启动响应？

我使用以下代码：

<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
    <tr>
        <td style="text-align: center; vertical-align: top;">
            <!-- HEADER -->
            <table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
                <tr>
                     <!-- Logo -->
                     <td align="left" style="display: inline-block; padding: 5px;">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                     <!-- Logo -->
                     <td align="right" style="display: inline-block; padding: 5px;">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

使用以下媒体查询到您的CSS文件。这将使你的td在640个设备下宽100％。

注意：我在标题table和徽标td中提到了两个类。

＆＃13;

.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
@media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;

}
}

＆＃13;

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
    <tr>
        <td style="text-align: center; vertical-align: top;">
            <!-- HEADER -->
            <table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
                <tr>
                     <!-- Logo -->
                     <td align="left" style="display: inline-block; padding: 5px;" class="logo">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                     <!-- Logo -->
                     <td align="right" style="display: inline-block; padding: 5px;" class="logo">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

＆＃13;

请参阅jsfiddle以获取响应 -

https://jsfiddle.net/vaishuk/qhqgrgnc/1/

希望这会有所帮助：）

Answer 2

我认为你遗失Media Query。将显示设置为内联块会使div彼此并排排列。

如果您删除了td上的inline-block：<td align="left" style="display: inline-block; padding: 5px;">。在第二个表中，并在给它一个css类后添加一个媒体查询：

    ` @media (max-width:640px){
      td.secondtable-cell{
        display: block;
      }
    }`

这应该按预期工作。注意，您可能需要为空间添加marigins / padding。

Answer 3

请不要使用表格。表格不具备响应性，现在人们使用div来实际制作这样的容器。

CSS：

#page{
  width: 1280px;
}

#container1,#container2{
  disply:inline-block;
  width:49%;
}

HTML：

<div id="page">
  <div id="container1">Container2</div>
  <div id="container2">Container1</div>
</div>

如何在HTML响应中创建两列？

3 个答案: