使用div标签和css的表式设计

Question

我对html和CSS很新，所以也许这是一个很容易回答的问题，如果有的话，对不起。

我做了一些关于如何正确设置页面的研究，以便它具有响应性。最初我用一张桌子在我的一个网页上安排图像和评论。 （我把那个放在这里http://www.maddielabstudio.com/artwork-table以供参考。）然后我发现它在我的手机上没有正常显示。经过一番研究后，我得出的结论是，我可能不应该首先使用表格，而div标签和CSS是更好的解决方案。

我将图像放在我想要的位置，并随着屏幕尺寸的变化正确缩放。但是，我不确定如何将评论放在图像的右侧并垂直居中于图像上。理想情况下，如果屏幕低于一定的大小，我会喜欢评论在图像下方移动。以下是我到目前为止尝试设置的内容：www.maddielabstudio.com/artwork。基本上，我希望它看起来像我用桌子制作的页面，但要做出响应，必要时缩小图像，并在手机大小的屏幕上移动图像下方的评论。

非常感谢任何帮助或建议。谢谢！

Answer 1

我建议查看CSS的响应式网格系统，例如Skeleton（http://www.getskeleton.com）。它们非常易于使用，并且会为您做很多工作！

另外 - 尝试使用它来缩放图像：

img {
    max-width: 100%;
}

Answer 2

要获得图片右侧的评论，这应该有效：

删除float:left并将display:inline-block添加到.artwork样式。 将display:inline-block添加到.commentary样式。

对于垂直对齐，我认为您可以为这些span标记设置vertical-align:middle。