Html 左右对齐在同一条线上

我想创建一个

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>

---

当这起作用时，两个

跨过
展开框标题的灰色背景，而Lorem Ipsum文本的浮动比它应该的要高。
您只需要添加
清除：两个
div

或

只需创建一个具有属性的类

.clear{
    clear:both;
}



左上收割台
右上标题
或

你可以在左边做

display:inline-block;

这是JSFIDLE

但首先，您有内联css代码，完全不编写内联css代码是一个很好的实践

clearfix是一项古老的技术，它可以工作，但内联块将停止使用clearfix

下面是链接：
尝试添加
溢出：隐藏
到
#展开框标题
元素的样式。这将自动清除其中浮动的
span
元素，而不需要额外的HTML标记。
要包含浮动，请使用

因此，容器的css将如下所示：

#expand-box:before, #expand-box:after {
    contents: "";
    display: table;
}
#expand-box:after {
    clear: both;
}

代码无法工作的原因是浮动div不会影响周围元素的大小。左侧浮动上的内联块出现的问题是，随着屏幕变小，会丢失一个标题。我缩小了JSFIDLE Mehmet ERN Yener提供的屏幕大小，右标题消失了。如果标题很长，而屏幕很小，则右侧标题将消失

我认为更好的方法是使用clearfix类或使用overflow标记。还有空Div方法——但我并不真正喜欢这种方法。如果您使用这些方法中的一种，那么当左标题与右标题靠得太近时，左标题将堆叠在右标题的顶部

以下是使用Clearfix和Overflow的示例：

Clearfix:

HTML:

溢出：

HTML:

我最终使用了一种不同的技术，如上所述，但也感谢您的技术。非常好，我在没有任何CSS的情况下使用了这种技术。浮动正在成为一种垂死的艺术，并且在使用中越来越不受欢迎，但如果您经常使用它，本文将有助于理解浮动行为：
display:inline-block;

#expand-box:before, #expand-box:after {
    contents: "";
    display: table;
}
#expand-box:after {
    clear: both;
}

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

#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: "\00A0"; 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}  

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

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