Html 把两个div放在一起

我正试着把两个div放在一起。 html

但不知何故，两个div并不在同一个级别上，右div低于左div。如何解决这个问题？我试着使用左浮动和右浮动，但它没有对齐哪个应该对齐。这是什么原因造成的

---

感谢您的帮助

对于main

div

使用

display:flex

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

正文{
字体系列：“Segoe UI”，“Lucida Grande”，Tahoma，无衬线；
字体大小：100%；
}#地位{
/*避免状态文本过宽*/
空白：预处理；
文本溢出：省略号；
溢出：隐藏；
}
#地位{
宽度：100%；
显示：flex；/*这很重要*/
}
输入{
宽度：100px；
高度：25px；
边框顶部：0px；
左边框：0px；
右边框：0px；
大纲：无；
}
#包袱{
宽度：30%；
身高：100%；
背景：黑色；
}
#争吵{
宽度：70%；
身高：100%；
背景：红色；
}

---

我已经研究过了，这个问题是由css中的空格：pre引起的。因此，您需要删除它，然后在div中相应地定位输入

<style>

  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {

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

  </style>

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

身体{
字体系列：“Segoe UI”，“Lucida Grande”，Tahoma，无衬线；
字体大小：100%；
}#地位{
文本溢出：省略号；
溢出：隐藏；
宽度：600像素
}
输入{
宽度：100px；
高度：25px；
边框顶部：0px；
左边框：0px；
右边框：0px；
大纲：无；
}
#包袱{
位置：相对位置；
宽度：30%；
身高：100%；
背景：黑色；
浮动：左
}
#争吵{
位置：相对位置；
宽度：65%；
身高：100%；
背景：红色；
浮动：对；
}
#清楚的{
明确：两者皆有；
}

删除css中id的属性：

white-space: pre;

请参阅此属性的文档：

您在容器状态上使用空格：pre，同时在代码中使用额外空格缩进。
更好的方法是删除该属性并在wrapLeft和wrapRight上使用填充

在您当前的代码中，尝试像这样从wrapRight中删除垂直空间

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

额外的间距和偏移量来自使用

空白：pre

显示的空白。这些空白来自html标记之间的缩进。您需要从

#status

中删除该属性，并将其放在单独的元素（例如

）中，该元素将只包含要使用

文本溢出进行剪切的文本：省略号
对于较旧的浏览器支持，您可以使用CSS
float
和
width
属性


正文{
字体系列：“Segoe UI”，“Lucida Grande”，Tahoma，无衬线；
字体大小：100%；
}#地位{
/*避免状态文本过宽*/
空白：预处理；
}
输入{
宽度：100px；
高度：25px；
边框顶部：0px；
左边框：0px；
右边框：0px；
大纲：无；
}
#包袱{
浮动：左；
宽度：30%；
背景：黑色；
身高：100%；
}
#争吵{
浮动：对；
宽度：70%；
背景：红色；
身高：100%；
利润率顶部：-23px；/*重要*/
}

应该可以解决这个问题

正文{
字体系列：“Segoe UI”，“Lucida Grande”，Tahoma，无衬线；
字体大小：100%；
}#地位{
/*避免状态文本过宽*/
空白：预处理；
文本溢出：省略号；
溢出：隐藏；
宽度：600像素
}
输入{
宽度：100px；
高度：25px；
边框顶部：0px；
左边框：0px；
右边框：0px；
大纲：无；
}
#盛怒{
显示：内联块；
}
#包袱{
位置：相对位置；
宽度：30%；
身高：100%；
背景：黑色；
}
#争吵{
位置：相对位置；
宽度：65%；
身高：100%；
背景：红色；
}

我同意，使用flex box。我尝试使用网格，但只有最新的浏览器支持这一点。好了，现在我添加了一个新方法：）。
white-space: pre;

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