2带侧边栏的列响应式布局

Question

我正在尝试创建一个2列布局，当它达到移动尺寸时会降至1.

我正在使用响应模式模板，但是，当我将它放入石蕊中测试侧边栏时，只是收缩而不是实际下降到主要内容之下。

非常感谢任何帮助。谢谢！

/* Column Drop Layout Pattern CSS */

@media only screen and (max-width: 460px) {
  td[class="pattern"] .col {
    display: block;
    width: 100%;
  }
  td[class="pattern"] .col:first-child {
    margin-bottom: 20px;
  }
}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="pattern">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td class="col" width="400" align="left" valign="top">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td align="left" valign="top" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-right: 20px;">
                  <h1 style="margin-top: 0;">Main Column</h1>
                  <p style="padding-bottom: 10px; line-height: 20px !important;">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.
                    Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend
                    arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
                  </p>
                  <img src="http://placehold.it/140x50/333&text=CTA»" alt="" style="display: block; border: 0;" />
                </td>
              </tr>
            </table>
          </td>
          <td class="col" width="200" align="left" valign="top" style="background: #ebebeb;">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td align="left" valign="top" style="padding: 20px;">
                  <table cellpadding="0" cellspacing="0">
                    <tr>
                      <td colspan="2" align="left" style="font-family: arial,sans-serif; font-size: 22px; font-weight: bold; color: #666; padding-bottom: 10px;">Sidebar</td>
                    </tr>
                    <tr>
                      <td width="14" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
                      <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 1</td>
                    </tr>
                    <tr>
                      <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
                      <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 2</td>
                    </tr>
                    <tr>
                      <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
                      <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 3</td>
                    </tr>
                    <tr>
                      <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
                      <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 4</td>
                    </tr>
                    <tr>
                      <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td>
                      <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 5</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

close

也应该有效：什么客户端/浏览器会在石蕊中崩溃？

Answer 2

您正在使用表格结构，左侧和右侧的区块包含 @media only screen and (max-width: 460px) { td.pattern .col { display: block; width: 100%; } td.pattern .col:first-child { margin-bottom: 20px; } } 元素，因此实际上无法在另一个td下显示td元件。

这意味着你应该改变你的html并用div或其他元素写它