把两个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

将display:flex用于主div。

另外看看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>

Answer 2

对于旧版浏览器支持，您可以使用CSS float和width属性。

＆＃13;

＆＃13;

body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;

  }
  

  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft{
    float: left;
    width: 30%;
    background: black;
height: 100%;
  }
  #wrapRight{
    float: right;
  width: 70%;
    background: red;
    height: 100%;
    margin-top:-23px;  /* Important*/
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我已经调查了它，问题是由白色空间引起的：在CSS中。所以你需要删除它，然后相应地将输入放在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>

Answer 4

在css中删除你的id的属性：

white-space: pre;

请参阅此属性的文档： https://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 5

您正在容器状态上使用 white-space：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>

Answer 6

额外的间距和偏移来自您使用white-space: pre显示的空白区域。这些空格来自html标签之间的缩进。您需要从#status中移除该属性，并将其放在单独的元素（例如<p>）中，该元素只包含您想要使用text-overflow: ellipsis剪切的文本。

Answer 7

那应该解决它

＆＃13;

＆＃13;

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,#wrapRight{
    display: inline-block;
  }
  #wrapLeft{
    position: relative;
    width: 30%;
    height: 100%;
    background: black;
  }
  #wrapRight{
    position: relative;
    width: 65%;
    height: 100%;
    background: red;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<!-- -->用于区分代码

if you need support for ie7