CSS桌面跳到一邊？

Question

我們有一個CSS表 - 由CSS製作& DIVS。

右側菜單固定爲20％，&這似乎正常工作...

在屏幕中間

，我們有4-5行的信息表。表格的第一行是每列的鏈接，用於排序。

它只有幾個數據線（我們將在稍後添加「頁」，當我們得到更多的數據）

的問題是，當我們選擇一個鏈接，（在同一頁面刷新排序或其他排序 - 或者只是刷新屏幕），中間表「跳」左或右..它不會保持在屏幕上的相同位置&是非常討厭..

內容的表本身是相同的寬度 - 表格大小不會改變。但表本身轉移位置...

http://animals.kwister.com/directory/region

（嘗試在桌子上方的鏈接）。

是否有辦法讓表格「固定」到可用空間的「中心」 - 由右側菜單/右側欄減少。

當然，隨着我添加更多的數據/文本 - 表格的寬度將增加以應付，但它將保持「居中」。

我們今後可能會添加一個左邊的菜單/ div，我們只是在開發這個網站&它沒有太多的展示。這是我第一次看到像這樣的CSS轉換。

Answer 1

它由表格佈局固定引起的，以及您正在使用js添加側面板的事實。

您應該考慮使用類似bootstrap的CSS網格來獲得更一致的佈局。或者使用display：block，float：left和widh：x％;

.column-left, .column-right { 
display: block; 
width: 20%; 
float: left; 
} 
.column-center { 
display: block; 
width: 60%; 
float: left; 
} 

，或者你可以做在右手列，並將其絕對位置的快速和骯髒的CSS修復：

display: block; 
width: 20%; 
float: left; 

Answer 2

我注意到，「消息」區域在運行時使用JavaScript加載。

最初有在div沒有任何內容：

<div id="messages" style="float:right; display: inline; width:20%;"></div> 

或許你可以嘗試添加nbsp;這樣的DIV中。 這可能會使「20％」寬度起作用。

<div id="messages" style="float:right; display: inline; width:20%;">&nbsp;</div> 

我所看到的是，第一個頁面加載後的表集中到整個窗口，如果「消息」格是不存在（這是正確的，因爲它的內容是事後加載）。 然後，當「消息」的內容存在時，表格居中到剩餘的寬度。