如何通過CSS使DIV捕捉到網格？

Question

我想弄清楚如何通過CSS將DIV列捕捉到一些固定大小的網格。

這裏的測試頁我的工作：http://mapofemergence.com/test/MoEv2/

我想要得到的，是正確的div（綠色的）某種方式捕捉到背景網格四邊形：調整瀏覽器窗口時，紅色四邊形應該分佈在中間區域，而綠色的列應該「填充」頁面右側的剩餘區域，但仍然保持與網格對齊（左邊）。

基本上，是一個網格的四大小，正確的綠色的div應該具有可變的寬度，等於或大於一個，反正比2A（在這種情況下，它應該設置回次要寬度爲a，同時又有一個紅色四邊形從下排移到上排）。

這裏是一個圖像以獲得更好的主意：

（對不起，我的名譽不允許超鏈接）

我真的不知道這可以通過CSS來實現，但我相信你們中的一些人可以幫助找到一些解決方案或解決方法。如果可能，我不會使用JavaScript。

感謝您的幫助， 小號

Answer 1

不幸的是HTML/CSS不必做你想做的必要功能。你只能通過使用JavaScript來實現它。

你應該將一個函數綁定到窗口調整大小事件將綠色的div寬度設置爲期望的值。在jQuery的它應該是這個樣子的是：

$(window).resize(function() { 
    $("#rx").width(
     parseInt($("#rx").css("min-width").slice(0, -2)) + (
      ($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true) 
     ) 
    ); 
}); 

注意，這個代碼可以很容易地優化，但我想讓它儘可能簡單。