Question

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

这些元素中的两个需要堆叠在左边，一个浮动到右边。

将#three置于其他内容之上并将其浮动到右侧可使其显示在正确的位置。但是，一旦我的媒体查询在小屏幕上启动，并且这三个元素跳到100％宽度，它就会以错误的顺序显示。

如何定位#three使其显示在#one和#two的相同高度，而无需重新排序？

我无法将#two隐藏在#one内，因为它与address代码无关。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

您必须将#one和#two放入另一个容器中。我已为浮动添加了.left和.right类。

浮动的定义，根据W3C：

浮动是一个在当前向左或向右移动的框线。浮动（或“浮动”或浮动）最有趣的特征 “浮动”框是指内容可以沿着它的边流动（或者是禁止“清除”财产这样做。内容流下来左侧浮动框的右侧，沿着左侧浮动框的右侧右浮箱子。

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

看到我的小提琴结果：http://jsfiddle.net/54ej9wt5/

Answer 3

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

我怎样才能将一个div放在另外两个div的右边？

3 个答案: