如何水平并排保持两张桌子？

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至width:79%和表2既具有10px一起20px左+右缘，使表2的宽度将width:calc(21% - 20px);，将确保这两个表并排留侧浮动。

了解更多关于CSS calc() - https://developer.mozilla.org/en-US/docs/Web/CSS/calc