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

Question

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

其中两个元素需要堆叠到左侧，一个浮动到右侧。

将 #three 置于其他内容之上并向右浮动可使其显示在正确的位置。但是，一旦我的媒体查询在小屏幕上启动并且这三个元素跳到 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/

Answer 2

您必须将 #one 和 #two 放入另一个容器中。我为花车添加了 .left 和 .right class。

float 的定义，根据 W3C：

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

所以发生的是 #three 向右浮动，但被放到 #two 的右侧。另外 #two 需要一个 clear: left 因为浮动属性显示每个浮动内联。 clear: left 就像一个新行。当浏览器的宽度变小时，#three浮动在#two下方，因为它遵循浮动规则。

查看我的 fiddle 结果：http://jsfiddle.net/54ej9wt5/

Answer 3

将#div3 的最大宽度设置为 20%。

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

How can I position one div to the right of two others?

html

css

position