html - 当窗口太短时，CSS 创建两列

Question

我有一个页面，上面有一张图片，下面有文字，像这样:http://jsfiddle.net/e3vWe/1/我设置了

img {
width:80%;
max-width:900px;
display:block;
margin-left:auto;
margin-right:auto;
}

问题是，在较小的屏幕上，图像的底部被截断，其下方的文本需要滚动才能访问。有没有一种方法(我假设使用单独的样式表)使文本出现在图像的左侧，同时当窗口的高度低于 600px 时保持整个页面居中？此外，对于移动用户，当窗口高度低于 400 像素时，恢复为移动样式表。谢谢。

Answer 1

对所有图像尝试这个，并尝试在不同屏幕尺寸上使用不同风格的媒体查询。

img { max-width: 100% !important; }