使用 div 标签和 css 的表格设计答案

【问题标题】：Table-like design using div tags and css使用 div 标签和 css 的表格设计
【发布时间】：2013-10-02 22:20:03
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css layout responsive-design

【解决方案1】：

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

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

img {
    max-width: 100%;
}

【讨论】：

嗨，我实际上已经找到了codeimg { max-width: 100%:} code，谢谢。那个骷髅的东西看起来非常棒。我得试试看。
您对 Skeleton 的熟悉程度如何？我认为这可能是一个新手问题，但我如何让我的子主题识别骨架.css 文件？如果我将它复制并粘贴到我的 style.css 文件中，它会起作用，但我觉得这不是最好的方法。

【解决方案2】：

要获得图片右侧的评论，应该可以：

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

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

【讨论】：

感谢您的建议。它可以使评论向右移动，但对于在较小的屏幕上将评论移动到图像下方没有任何作用。如果找不到其他好的解决方案，我可能会求助于它。