Question

遇到移动/平板电脑和桌面之间的布局问题。

对于移动设备：我需要先将英雄形象放在第一位，然后将内容放在它下面。（sample here）

对于平板电脑/桌面：我需要将内容放在英雄形象的顶部上。（sample here）

我尝试过使用背景图片，但发现调整页面布局会影响背景图片的大小和比例

我已经尝试过绝对将一个放在另一个上面但是遇到了一个场景，我最终摆弄了视图之间的布局（使用bootstrap），而不是应该可管理的。

会喜欢关于如何产生这种结果的任何想法。

将尝试提供我所做的代码示例，但不确定它是否相关，因为它们似乎都没有产生预期的结果。

Answer 1

这是我为您创建的一个简单示例，请检查：

＆＃13;

#container {
    background: red;
    text-align: center;
    padding: 20px 0px;
}
#image, #content {
    display: inline-block;
    width: 45%;
    vertical-align: middle;
}
#image img {
    width: 100%;
}

@media (max-width: 500px) {
    #image, #content {
         display: block;
         width: 100%;
    }
}

＆＃13;

<div id="container"><div id="image"><img src="http://placehold.it/350x150" /></div><div id="content">Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. </div>

＆＃13;

点击Run Code Snippet并在Full Page中查看上述代码段，然后将浏览器窗口缩小到500px或更小，您会看到内容会自动显示在图片。最初，包含图片的<div>和内容都显示为inline-block，但对于小于500像素的屏幕，我们使用@media-queries将其display属性更改为{{ 1}}这就是内容在图像下面的原因。

Answer 2

使用media queries。

当窗口宽度小于平板电脑/桌面内容时，切换媒体查询并显示您的div块。要在行中显示它们，请使用display:inline-block;

Example。尝试调整结果窗口的大小。

Answer 3

这是我设置的CodePen示例，用于完成您所要求的内容：http://codepen.io/trevanhetzel/pen/pyCnf

基本上，如果您使用内嵌图片与背景图片进行比较，则可以在某个媒体查询断点处将其设置为position到absolute。将它的容器放置relative并将图像的兄弟（.hero-content）放置在relative，您可以将它放在相同的断点处，将宽度更改为无论你想要它多宽，它都位于图像的顶部。

<强> HTML

<div class="hero-contain">
  <img src="http://lorempixel.com/1000/300/" class="hero-img">
  <div class="hero-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a enim eu risus accumsan venenatis. Donec venenatis nunc ac tellus tempor, ac rutrum lorem semper. Suspendisse pulvinar elit sed luctus pulvinar. Donec id ultricies dui. Pellentesque suscipit nulla maximus, mollis urna laoreet, tempor tortor.</p>
  </div>
</div>

<强> CSS

.hero-contain {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}

.hero-img {
  max-width: 100%;
}

.hero-content {
  position: relative;
  background: rgba(255, 255, 255, .5);
  padding: 20px;
}

@media (min-width: 800px) {
  .hero-img {
    position: absolute;
  }

  .hero-content {
    float: right;
    width: 45%;
    margin: 20px;
  }
}

内容重叠的背景图片，具体取决于移动或桌面视图

3 个答案: