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
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
1
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
0
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
0
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
0
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
0
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
0
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
< !—>用于分隔代码
如果你需要ie7的支持
#1
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
1
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
0
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
0
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
0
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
0
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
0
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
< !—>用于分隔代码
如果你需要ie7的支持