Html css - 在同一行左右对齐两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19719270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - align two divs left and right on same line
提问by Lacer
please see http://jsfiddle.net/UGmA2/7/TIA
请参阅http://jsfiddle.net/UGmA2/7/TIA
1 div container 2 divs. Would like to put the second div on the first line but have it all the way to the right.
1 个 div 容器 2 个 div。想将第二个 div 放在第一行，但一直放在右边。
Any help would be appreciated,
任何帮助，将不胜感激，
<body background-color: #000000;>
<div id="footer-container" style="width=980px;">
<div id="div-left">
<ul id="footer">
<li id="text_separator"><a href="http://www.stackoverflow.org">Text</a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
</ul>
</div>
<div id="div-left">
<ul id="footer">
<li id="text_separator"><a href="http://www.stackoverflow.org">Text1</a>
<li id="text_separator"><a href="http://www.stackoverflow.org">Text2</a>
<li id="text_separator"><a href="http://www.stackoverflow.org">Text3</a>
<li id="text_separator"><a href="http://www.stackoverflow.org">Text4</a>
</ul>
</div>
</div>
</body>
回答by xnome
Using same idrepeatedly isn't a good idea, i change it all into class
id重复使用相同的不是一个好主意，我把它全部改成class
here is the modification
这是修改
<body >
<div class="footer-container">
<div class="div-left">
<ul class="footer">
<li><a href="http://www.stackoverflow.org">Text</a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
<li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
</li>
</ul>
</div>
<div class="div-right">
<ul class="footer">
<li><a href="http://www.stackoverflow.org">Text1</a></li>
<li><a href="http://www.stackoverflow.org">Text2</a></li>
<li><a href="http://www.stackoverflow.org">Text3</a></li>
<li><a href="http://www.stackflow.org">Text4</a></li>
</ul>
</div>
</div>
</body>
CSS:
CSS：
body{
background-color: #000000;
}
.div-left{
float:left;
padding-left:10px;
}
.div-right{
float:right;
padding-right:10px;
}
.footer-container{
height:40px;
max-width:980px;
border:1px solid salmon;
padding-top:5px;
}
.footer {
height:30px;
line-height:30px;
border:solid 1px #E5E5E5;
}
.footer li {
list-style-type:none;
float:left;
padding-left:10px;
}
.footer a {
text-decoration:none;
color:#0088CC;
}
.footer li:nth-child(1) {
text-decoration:none;
height:30px;
display:block;
background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
回答by otherDewi
change div id to class. you cannot have two ids on the same page. give the divs a width eg width:45%and float these items.
将 div id 更改为类。您不能在同一页面上有两个 ID。给 div 一个宽度，例如width:45%并浮动这些项目。
It appears the width of the first div is forcing the second to the line below.
看来第一个 div 的宽度迫使第二个 div 到下面的行。
回答by Precious Okwu
To the first div add a style to it like this <div id="first-div" style="float-left;width:400px>
给第一个 div 像这样添加一个样式 <div id="first-div" style="float-left;width:400px>
For the second div like this <div id="second-div" style="float-right;width:400px>hope this helps
对于这样的第二个 div<div id="second-div" style="float-right;width:400px>希望这会有所帮助
回答by Precious Okwu
Using the style "float" will demand that you use the style "width" so measure out the width of the container to know the appropriate width to assign to the inner divs
使用样式“float”将要求您使用样式“width”，因此测量容器的宽度以了解分配给内部div的适当宽度
