1

我对 html 和 css 很陌生，所以也许这是一个很容易回答的疯狂问题，如果是这样，对不起。

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

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

任何帮助或建议将不胜感激。谢谢！

4

2 回答 2

1

我建议研究 CSS 的响应式网格系统，例如 Skeleton ( http://www.getskeleton.com )。它们非常易于使用，并且会为您完成大量的跑腿工作！

另外 - 试试这个来缩放你的图像：

img {
    max-width: 100%;
}
于 2013-10-02T13:28:52.460 回答
1

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

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

至于垂直对齐，我认为您可以vertical-align:middle为那些跨度标签设置。

于 2013-10-02T13:54:14.247 回答