Html 使用div标记和css的表式设计

我对html和css还很陌生，所以也许这是一个非常容易回答的问题，如果是的话，很抱歉

我做了一些关于如何正确设置页面以使其响应的研究。最初，我用一张表格在我的一个网页上排列图片和评论。（我把它放在这里作为参考。）然后我发现它没有正确地显示在我的手机上。经过一点研究，我得出结论，我可能一开始就不应该使用表，div标签和CSS是更好的解决方案

我把图像放在我想要的地方，并随着屏幕大小的变化进行适当的缩放。但是，我不知道如何让评论位于图像的右侧，并垂直居中于图像上。理想情况下，如果屏幕小于某个大小，我希望评论移到图像下方。以下是我到目前为止在尝试建立这个网站时所做的：www.maddielabstudio.com/artwork。基本上，我希望它看起来像我用表格制作的页面，但要有响应性，必要时缩小图像的比例，当屏幕是手机大小时，将评论移到图像下方

---

如有任何帮助或建议，将不胜感激。谢谢

我建议研究CSS的响应网格系统，例如Skeleton（）。他们超级容易使用，并将为您做大量的腿部工作

另外-尝试以下方法缩放图像：

img {
    max-width: 100%;
}

---

要在图像的右侧获得评论，这应该是可行的：

删除

float:left

并将

display:inline block

添加到

.artwork

样式中。 将

display:inline block

添加到

.commentation

样式中

---

至于垂直对齐，我想你可以为那些span标签设置

垂直对齐：中间
。
谢谢你的建议。它的工作是把评论移到右边，但是它不能在较小的屏幕上把评论移到图片下面。如果我找不到另一个好的解决方案，我可能会求助于它。嗨，我实际上已经算出了
code
img{max width:100%:}
code
，谢谢。那个骷髅看起来真是太棒了。我得试试。你对骷髅有多熟悉？我认为这可能是一个全新的问题，但如何让我的孩子主题识别skeleton.css文件呢？如果我将它复制并粘贴到我的style.css文件中，它就会工作，但我觉得这不是最好的方法。