Html 左右对齐在同一条线上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22301555/
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
Left and right align on same line
提问by John 'Mark' Smith
I want to create a divthat has a header containing two pieces of text. One piece of text will be aligned left and one right. The header will have a gray background that will expand with the text:
我想创建一个div包含两段文本的标题。一段文本将左右对齐。标题将有一个灰色背景，将随着文本展开：
<div id="expand-box">
<div id="expand-box-header">
<span style="float: left;">Top left header</span>
<span style="float: right;">Top right header</span>
</div>
Lorem ipsum dorem nori seota ostiy
</div>
CSS:
CSS：
#expand-box
{
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;
}
#expand-box-header
{
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;
}
While this works, the two spansfloat over the expand-box-headergray background and the Lorem Ipsum text floats higher than it should.
虽然这有效，但两者都spans漂浮在expand-box-header灰色背景上，Lorem Ipsum 文本漂浮得比它应该的高。
采纳答案by Pearl
The reason your code wasn't working is because floating divs don't affect the size of the surrounding element. The problem you get with inline-block on your left side floatis that you lose one of your headers as the screen is made smaller. I shrank the screen size on the JSfiddle Mehmet Eren Yener provided and the right header disappears. If your headers are long, and the screen is small - the right header will vanish.
您的代码不起作用的原因是浮动 div 不会影响周围元素的大小。您在左侧浮动上使用内联块遇到的问题是，随着屏幕变小，您丢失了一个标题。我缩小了 JSfiddle Mehmet Eren Yener 提供的屏幕尺寸，右侧标题消失了。如果您的标题很长，并且屏幕很小 - 正确的标题将消失。
I think the better approach would be to either use a clearfixclass or to use the overflowtag. There's also the Empty Div Method- but I'm not really a fan of that one. If you use one of these methods instead the left header will stack on top of the right header when they get too close.
我认为更好的方法是使用clearfix类或使用溢出标签。还有Empty Div 方法- 但我并不真正喜欢那个方法。如果您使用这些方法中的一种，当它们靠得太近时，左侧标题将堆叠在右侧标题的顶部。
Here are examples of using Clearfix and Overflow:
以下是使用 Clearfix 和 Overflow 的示例：
Clearfix: http://jsfiddle.net/ATP33/
Clearfix：http: //jsfiddle.net/ATP33/
HTML:
HTML：
<div id="expand-box">
<div id="expand-box-header" class="clearfix">
<span style="float: left;">Top left header</span>
<span style="float: right;">Top right header</span>
</div>
<div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
</div>
CSS:
CSS：
#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}
#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;}
#expand_box_sub_header { clear: both; }
.clearfix:after { content: "<div id="expand-box">
<div id="expand-box-header">
<span style="float: left;">Top left header</span>
<span style="float: right;">Top right header</span>
</div>
<div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
</div>
A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
Overflow: http://jsfiddle.net/RL8ta/
溢出：http: //jsfiddle.net/RL8ta/
HTML:
HTML：
#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}
#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;
overflow: auto;}
#expand_box_sub_header { clear: both; }
CSS:
CSS：
.clear{
clear:both;
}
回答by Dhaval Marthak
You just need to add clear:bothdiv
你只需要添加 clear:bothdiv
Or
或者
Just create a class clearwith property
只需创建一个clear具有属性的类
<div id="expand-box-header">
<span style="float: left;">Top left header</span>
<span style="float: right;">Top right header</span>
<div style="clear:both;"></div> <!-- Here we go --> OR <div class="clear"></div>
</div>
display:inline-block;
回答by Mehmet Eren Yener
You can do for the left side
你可以为左侧做
#expand-box:before, #expand-box:after {
contents: "";
display: table;
}
#expand-box:after {
clear: both;
}
Here is the JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/
这是 JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/
But first of all, you have inline css code, it is a good practice to not write inline css code at all
但首先，您有内联 css 代码，最好不要编写内联 css 代码
clearfix is an old technology, it works but, inline block is to stop using clearfix
clearfix 是一项古老的技术，它可以工作，但是，内联块是停止使用 clearfix
Here is the link : What is a clearfix?
这是链接：什么是clearfix？
回答by Arnelle Balane
Try adding overflow: hidden;to the styles for the #expand-box-headerelement. This will automatically clear the floated spanelements inside it without the need for additional HTML markup.
尝试添加元素overflow: hidden;的样式#expand-box-header。这将自动清除其中的浮动span元素，而无需额外的 HTML 标记。
回答by josh_bailey4
To contain floats use the micro-clearfix.
要包含浮动，请使用micro-clearfix。
So your css for the container will look like this:
因此，您的容器 css 将如下所示：
##代码##