html - 将两个 div 并排放置

Question

我正在尝试将两个 div 放在一起。 html

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div>
  <div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>

CSS

  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 600px
  }
  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft{
    position: relative;
    width: 30%;
    height: 100%;
    background: black;
    float: left
  }
  #wrapRight{
    position: relative;
    width: 65%;
    height: 100%;
    background: red;
    float: right;
  }
  #clear{
    clear:both;
  }

然而不知何故，div 不在同一层，右边的在左边的下面。如何解决这个问题？我尝试使用左右浮动，但它没有对齐哪个应该对齐。什么会导致这个？ example

感谢帮助

Answer 1

对主要div 使用display:flex。

再看看CSS，我已经删除了一些CSS。

body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  #status{
  width:100%;
  display:flex;  /* It's Important */ 
  }
  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft{
    width: 30%;
    height: 100%;
    background: black;

  }
  #wrapRight{
    width: 70%;
    height: 100%;
    background: red;
  }
 

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div>
  <div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>