html - 固定 parent ，把它放在 child 的右边

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

我希望它在页面上显示这样的内容...

---

|一个| (包裹在下面) |二|

如有任何帮助，我们将不胜感激。

Answer 1

你可以使用flexbox

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

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