無法訪問CSS表格的響應式div表

我正在使用我的工作基於Drupal的CMS，我可以訪問的只有所見即所得和源代碼編輯器。我根本無法訪問CSS樣式表。無法訪問CSS表格的響應式div表

我創建了一個HTML表格，3x3，每個單元格都帶有圖像和標題。在桌面上運行良好，但在移動設備上，桌面運行在屏幕外。 Here it is in place。

我試圖用div標籤來重新創建表格，以獲得屏幕閱讀器的響應能力和可訪問性等。理想情況下，如果表格重新適合屏幕，可能從桌面上的4列跨越到移動設備上的一個專欄。理想情況下，圖像也會作出相應調整。

Here's what I've got so far（jsfiddle）。我真的是業餘水平，所以這是一個教程的混搭。它是功能性的，但即使有行標籤，它似乎仍然保留在一列中？

你能幫忙嗎？同樣，我只能編輯正文HTML，沒有CSS訪問權限。

忽略下面 - 必須發佈jsfiddle鏈接。

<div class="divTable" style="width: 100%;">

2017-10-05 A Morris

如果您可以編輯html部分，那麼您可能會在''標記的中加載的以前的外部樣式表。 ;） –

，你可以做，以使這項工作，以添加內容和以下的內聯樣式標籤這個最簡單的事情：

<style> 
    .divTableCell { 
     display: inline-block; 
     width: 24%; 
     vertical-align: top; 
    } 
</style>

但是，你會發現，這是不是很敏感在較小的屏幕上。我建議看看這裏的flex佈局：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

請記住，只要它是一個網頁，那麼你總是可以通過任何開發人員工具（[F12]鍵）訪問CSS源現代瀏覽器。

2017-10-05 12:02:19 dperish

我已經給出了你的第一個建議（我將檢查flex佈局） - 它的工作非常好，謝謝。我也玩過使用％而不是px尺寸的圖片，並且效果也很好。你知道如何讓細胞的頂部對齊而不是底部？ –

希望編輯的答案可以做到這一點。請接受這個答案，如果這對你有用。 – dperish

回答