左右对齐在同一行

Question

我想创建一个 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：

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

虽然这有效，但两个 spans 漂浮在 expand-box-header 灰色背景上，Lorem Ipsum 文本漂浮得比它应该的高。

原文由 John ‘Mark’ Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的代码不起作用的原因是浮动 div 不会影响周围元素的大小。您 在左侧浮动中使用内联块 遇到的问题是，随着屏幕变小，您会丢失一个标题。我缩小了 JSfiddle Mehmet Eren Yener 提供的屏幕尺寸，右标题消失了。如果您的标题很长，并且屏幕很小 - 正确的标题将消失。

我认为更好的方法是使用 clearfix 类或使用 溢出 标记。还有 Empty Div 方法——但我不是那种方法的忠实粉丝。如果您使用其中一种方法，当左标题太靠近时，左标题将堆叠在右标题的顶部。

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

Clearfix：http: //jsfiddle.net/ATP33/

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：

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

溢出：http: //jsfiddle.net/RL8ta/

HTML:

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

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;
overflow: auto;}

#expand_box_sub_header { clear: both; }

原文由 Pearl 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你只需要添加 clear:both div

要么

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

 .clear{
    clear:both;
}

---

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

演示

原文由 Dhaval Marthak 发布，翻译遵循 CC BY-SA 3.0 许可协议