如何在 HTML 响应中创建两列？ [关闭]

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 中提到了两个类。

.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%;

}
}

<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>

请参阅 jsfiddle 以了解响应式 -

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

希望这会有所帮助:)

Answer 2

我认为你错过了Media Query。 将显示设置为 inline-block 会使 div 彼此并排对齐。

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

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

这应该可以按预期工作。请注意，您可能需要为空间添加边距/填充。

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>