我正在尝试使用左侧的短文本列表和右侧的照片制作两列布局，如下所示...
列出图片
列出图片
列出图片
在狭窄的浏览器窗口或移动设备上查看时，我希望图像和列表能够交替使用，如此......
IMAGE
LIST
IMAGE
LIST
IMAGE
LIST
我想我会在HTML中以交替顺序放置项目，然后在较大窗口大小的情况下将图像浮动到右侧。这对于移动视图来说看起来很不错，但是在较大的浏览器窗口大小下，图像会以奇怪的方式与标题对齐，如您所见：
http://allgoodeatslocal.com/links.html
我不知道如何让这种情况发生，除了为两种尺寸分别设置...左侧（所有列表）和右侧（所有图像）div用于完整尺寸查看与交替列表和小型移动观看的图像。
有更好的想法吗？
答案 0 :(得分：0)
您可以使用媒体查询@media来实现此目的：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
为较小的分辨率/屏幕设置媒体查询，并将列表和图像div的宽度设置为容器的100％，它们应该堆叠。