Question

我有以下HTML表格和关联的CSS - http://jsfiddle.net/67LE7/

我相信这是导致问题的CSS

.content {
      position: relative;
      max-width: 944px;
      min-width: 200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;    
}

当我水平展开Result窗口时，第一列无限扩展并将第二列和第三列推送到下一行。预期结果是所有三列保持固定大小并显示在同一行上。我究竟做错了什么？

Answer 1

您需要设置固定宽度定价表并删除媒体查询。媒体查询正在重置宽度。媒体查询会让手机和平板电脑看起来不错，但如果您不需要...

updated fiddle

.pricing-table{
    width: 150px;

/*@media (max-width: 768px) {
    .pricing-table{
        width: 48.9%;
    }
}
@media (max-width: 480px) {
    .pricing-table{
        width: 100%;
        margin: 0 0 10px;
    }
}*/

如何修复我的表，以便在重新调整窗口大小时不会扩展列？

1 个答案: