使用div標籤和css的類似桌面的設計

我對html和css很新，所以也許這是一個非常容易回答的問題，如果是這樣，對不起。使用div標籤和css的類似桌面的設計

我做了一些研究，如何正確設置頁面，使其響應。本來我曾用一張桌子在我的一個網頁上安排圖片和評論。（我把這個留在http://www.maddielabstudio.com/artwork-table作爲參考。）然後我發現它沒有正確顯示在我的手機上。經過研究，我得出結論，我可能不應該首先使用表格，並且div標籤和CSS是更好的解決方案。

我得到的圖像是我想要它們的位置，並在屏幕尺寸發生變化時正確縮放。但是，我不確定如何讓評論位於圖像的右側並垂直居中在圖像上。理想情況下，如果屏幕的大小低於某個尺寸，我會喜歡評論在圖像下移動。以下是我嘗試設置這個項目的過程：www.maddielabstudio.com/artwork。基本上，我希望它看起來像我用桌子製作的頁面，但要做出反應，在必要時縮放圖像，並在手機屏幕大小調整時將評論移動到圖像下方。

任何幫助或建議將不勝感激。謝謝！

來源

2013-10-02 keller8899

我建議查看CSS的響應網格系統，如Skeleton（http://www.getskeleton.com）。他們超級好用，並且會爲你做很多工作！

而且 - 試試這個縮放您的圖片：

img { 
    max-width: 100%; 
}

來源

2013-10-02 13:28:52

嗨，我實際上已經計算出'code'img {max-width：100％：}''''''謝謝。那個骨架的東西看起來很棒。我必須試一試。 – keller8899

你對骷髏有多熟悉？我認爲這可能是一個總的新手問題，但我如何讓我的孩子主題識別skeleton.css文件？如果我將它複製並粘貼到我的style.css文件中，它會起作用，但我有一種感覺，這不是實現它的最佳方式。 – keller8899

要獲取有關圖像的右側的評論，這應該工作：

刪除float:left，並添加display:inline-block到.artwork風格。將display:inline-block添加到.commentary風格。

至於垂直對齊，我認爲你可以爲這些span標籤設置vertical-align:middle。

來源

2013-10-02 13:54:14 Ant

感謝您的建議。它有助於獲得正確的評論，但它並沒有爲在較小的屏幕上移動圖像下方的評論做任何事情。如果我找不到另一個好的解決方案，我可以訴諸它。 – keller8899

使用div標籤和css的類似桌面的設計

回答

相關問題