把两个歌剧女主角放在一起

I am trying position two divs next to each other. html

我试着把两个女主角放在一起。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

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

Yet somehow the divs arent on same level, the right one is below the left one. How to fix this? I tried using left and right float but it doesnt align which should. What could cause this?example

然而不知何故，女主角并不在同一水平上，右边的在左边的下面。如何解决这个问题?我试着用左右浮动，但它不对齐。这可能导致什么?例子吗

Thanks for help

谢谢你的帮助

7 个解决方案

#1

Use display:flex for main div.

使用display:flex进行主div。

Also look at the CSS, I have removed some of CSS.

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

#2

For older browser support, you can use CSS float and width properties.

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

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*/
  }

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

#3

I've looked into it and the issue is caused by white-space : pre in the css. So you need to remove that and then position the inputs accordingly inside the divs.

我已经研究过了，这个问题是由空白引起的:pre在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>

#4

Remove the property of your id in css:

在css中删除您的id属性:

white-space: pre;

See the documentation for this property: https://www.w3schools.com/cssref/pr_text_white-space.asp

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

#5

You are using white-space: pre on the container status along with indenting your code with extra spaces.
A better approach would be to remove that property and use padding on wrapLeft and wrapRight.

您正在使用白空间:在容器状态上加上额外的空格来缩进代码。更好的方法是删除该属性并在wrapLeft和wrapRight上使用填充。

In your current code, try removing vertical space from wrapRight like this.

在当前代码中，尝试从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>

#6

Additional spacing and offset comes from white spaces you display with white-space: pre. These white spaces comes from indents between html tags. You need to remove that property from #status and put it in separate element (<p> for example) which would contain just text you want to cut with text-overflow: ellipsis.

额外的间距和偏移量来自于空白区域:pre。这些空格来自html标签之间的缩进。您需要从#status中删除该属性，并将其放在单独的元素(例如

)中，该元素只包含您想要使用text-overflow:省略号进行剪切的文本。

#7

That should fix it

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

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

the <!-- --> for spaceing the code

< !—>用于分隔代码

if you need support for ie7

如果你需要ie7的支持