响应式设计中的容器/图像定位

Question

我正在尝试修复一个信息容器，以便在它们以移动屏幕尺寸加载时正确进入图像下方。

图片样式如下：

.coach_photo img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display: block;
margin-bottom: 15px;
width: 140px;
height: 140px;
}

这是信息容器样式：

.coach_info {
margin-left: 180px;
}

在桌面格式中，图像位于左侧，信息容器（包含文本和一些小图像）位于图像右侧。如图片右侧 180 像素所示。

当屏幕宽度变得小于特定尺寸时，应该让信息容器进入图像下方。

相反，当我减小浏览器的宽度以观察转换时，信息容器保持在相同的位置（图像的右侧）并变得越来越薄，但永远不会向左移动以自动放置图片下。

如果我将左边距 180px 更改为 0，它会完美地放置在图像下方的正确位置，但显然桌面版已损坏。有什么想法吗？

Answer 1

基本上你会到达一个小于或等于 800px 的断点，并且将应用 @media 规则中的样式。显示块将使其进入图像下方。

// 此处为桌面样式

@media all and (max-width: 800px) {
 .coach_info {
    margin-left: 0;
    display: block;
  }   
}

http://fiddle.jshell.net/p8wZ2/7/show/