如何水平並排保持兩張桌子？

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