我怎样才能模仿这种布局

Question

我目前正在尝试使用HTML / CSS模仿此布局。附件是桌面和移动应该是什么样子。对于移动设备，我并非100％确定最佳方法。请注意图像是如何出现在＆＃34; Bowers＆amp;威尔金斯＆＃34 ;.

布局是100％浏览器宽度btw。我最初的想法是为此使用弹性盒......但我不能100％确定它是否是正确的方法。我目前很擅长使用弹性盒子。

Answer 1

最简单的方法可能是将图像浮动到桌面res的右侧（当你运行下面的代码片段时，最初显示在演示中的单个列中 - 有效的移动res。如果你切换到整页模式，你应该看到元素顺序改变，因此图像浮动到右边）：

body {
  font-family: Arial, sans-serif;
  background-color: #aaa;
  padding: 1em;
  font-size: 14px;
}

h1,
h2,
p {
  margin: 0;
  color: #fff;
}

/* float image to the right, half the width of the viewport */
img {
    float: right;
    margin-left: 1em;
    width: 50vw;
}

h1 {
  font-size: 1.25em;
  font-weight: normal;
}

h2 {
  text-transform: uppercase;
  font-size: 1em;
}

@media only screen and (max-width: 767px) {
  /* at mobile res, remove the float so the image appears back between the headings */
  img {
    float: none;
    margin-left: 0;
    margin-bottom: .75em;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />

<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers &amp; Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>

Answer 2

我肯定会推荐bootstrap作为一个很好的解决方案。他们有预先构建的CSS类，可以自动拉动和推送和重新排列这样的对象。

这里的类是class =“col-md-6 col-md-push-6”和class =“col-md-6 col-md-pull-6”