固定父母，将孩子的权利定位

Question

我正在尝试为我的网页创建一个顶部栏，分为两个部分。但是，我很难让我的div定位。看起来包装会与这些样式集合折叠。我可以避免这种情况。

我有这样的事情，

<div id="wrap">
    <div id="one"></div>
    <div id="two"></div>
</div>

Css如下;

#wrap {
    position: fixed;
    top:0;
    width: 100%;
    background-color:#ff0;
}
#one {
    position: relative;
    left:0;
    width: 40%;
    background-color: #f00;
}
#two {
    position: relative;
    right:0;
    width: 40%;
    background-color: #00f;
}

我希望它在页面上显示如下......

| One | （在下面包裹）|两个|

非常感谢任何帮助。

Answer 1

Flexbox可以做到这一点。

＆＃13;

＆＃13;

#wrap {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #ff0;
}
#one {
  height: 50px;
  width: 40%;
  background-color: #f00;
}
#two {
  height: 50px;
  width: 40%;
  background-color: #00f;
}

＆＃13;

<div id="wrap">
  <div id="one"></div>
  <div id="two"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle Demo

Answer 2

你可以使用flexbox

＆＃13;

＆＃13;

<div id="wrap">
    <div id="one"></div>
    <div id="two"></div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;