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;
}

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

当屏幕宽度小于特定大小时，应该使信息容器位于图像下方。

相反，当我减少浏览器的宽度以观察转换时，信息容器保持在相同的位置（图像的右侧）并且在那里得到更细的但是从不向左移动以自动放置在图像下。

如果我将180px左边的边距更改为0，则完全放置在图像下方的正确位置，但桌面版本显然已损坏。任何想法？

Answer 1

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

// DESKTOP STELES HERE

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

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

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

1 个答案: