Question

我正在研究这个项目，我的布局在几乎所有的屏幕分辨率下运行良好，而且我试图对屏幕分辨率小于745px进行最后润色。但是我在另一个表格单元格中有2个表格，它们不会按照它们的方式对齐。我正在使用保证金：0px auto;在CSS中，但他们不会做我告诉他们要做的事情，即使我所知道的关于CSS的一切都说它应该有效。

在更高的屏幕分辨率下，这两个表被告知浮动到它们的父单元格的左侧和右侧，它们就可以了。但是当我以小于745px的屏幕分辨率更改CSS代码时，我告诉他们显示：block;保证金：0px auto;它应该将它们置于细胞内，但事实并非如此。难道我做错了什么？

/*Normal Resolutions */

Upper-block, lower-block {
  position: relative;
  margin: 20px auto;
  width: 800px;
  }

left-data {
  display: inline-block;
  width: 50%;
  max-width: 360px;
  float: left;
}

right-data {
  display: inline-block;
  width: 49%;
  max-width: 360px;
  float: right;
}


/*Smaller Resolution */

@media screen and (max-width: 745px) {
    left-data, right-data {
      display: block;
      clear: both;
      margin: 0px auto;
      position: relative;
    }
 }

<div>

<table>
  
  <tr>
    <td>
      <table id="upper-block">
        <tr>
          <td>Table 1 Content</td>
          <IMAGE HERE>
           </td>
           </tr>
      </table>
      </td>
     </tr>
  
  <tr>
    <td>
      <table id="lower-block">
        <tr>
          <td>
            <table id="left-data"> </table>
            <table id="right-data"> </table>
          </td>
        </tr>
      </table>
      </td>
    </tr>
  
</table>
  
</div>

Answer 1

由于float仍处于有效状态（或应该是），请尝试添加float:none, or float:none !important;以覆盖不同＆＃34;对齐的混搭＆＃34;

尝试使用CSS将表格置于表格中心

1 个答案: