Question

我在水平对齐的HTML页面上有两个表，一个在左边，另一个在右边，当浏览器最大化时它们看起来很好但是当窗口大小减小时它们会失去水平对齐。我在这两个表中使用了以下CSS。

表1

.viewTable {   
    background-color: #eeeff4 !important;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    width: 79% ;
    margin-left:0;
    float: left;
    clear:both;
}

表2

.settleViewTable {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    width: auto;
    margin-right:10px;
    margin-left:10px;
    float: right;
}

我可以知道一种更好的方法来实现这一目标而不会在窗口大小减小时失去对齐吗？

Answer 1

您将表格1设置为small-7，表格2的左侧和右侧边距width:79%一起10px，因此表格2的宽度为20px这将确保两张桌子并排浮动。

详细了解CSS width:calc(21% - 20px); - https://developer.mozilla.org/en-US/docs/Web/CSS/calc

如何水平并排维护两张桌子？

1 个答案: