html - 如何将一个 div 放在另外两个 div 的右边？

Question

我试图在 div 中定位三个元素，但我遇到了一些麻烦。

这些元素中的两个需要堆叠到左侧，一个 float 到右侧。

将 #three 放在其他内容之上并将其 float 到右侧可以使其出现在正确的位置。然而，一旦我的媒体查询在小屏幕上启动并且这三个元素跳到 100% 宽度，它就会以错误的顺序出现。

我如何定位 #three 使其出现在 #one 和 #two 的相同高度而无需重新排序它们？

我不能将 #two 放入 #one 中，因为它与 address 标签无关。

#container {
  width: 100%;
  background-color: red;
  height: 150px;
}

#one, #two {
  width: 40%;
}

#three {
  float: right;
  }

#one {
  background-color: green;
  }
#two {
  background-color: blue;
  }
#three {
  background-color: orange;
  }

<section id="container">
  <address id="one">
    <p>text text text <br> text text <br> text</p>
    </address>
  <div id="two">
    <p>text text text text </p>
    </div>
  <nav id="three">
    <p>text text text <br> text text <br> text</p>
    </nav>
</section>

Answer 1

你能绝对定位#three吗？当您的媒体查询启动时，将其放回 relative 位置。 http://jsfiddle.net/L0v8ozjq/